/* ==========================================================
   CUSTOM.CSS – MULTIBETON Serviceportal
   Joomla 5 / Helix Ultimate / JoomHelpDesk
   ==========================================================

   Farbschema:
   - Text:          #000000
   - Rahmen normal: #000000
   - Akzent/Hover:  #e0a9d0
   - Hintergrund:   transparent / weiß je nach Formularbereich

   Designregel:
   - Alle normalen Rahmen sind schwarz.
   - Hover, Fokus, Aktiv und ausgewählte Zustände sind rosa.
   - Blaue Bootstrap-Standardfarben werden überschrieben.
   ========================================================== */


/* ==========================================================
   01. Globale Variablen
   ========================================================== */

:root {
    --mb-text: #000000;
    --mb-border: #000000;
    --mb-accent: #e0a9d0;
    --mb-white: #ffffff;
    --mb-placeholder: #666666;
}


/* ==========================================================
   02. Helix / Joomla Grundlayout
   ========================================================== */

#sp-header {
    box-shadow: none !important;
}

body.offcanvas-open .offcanvas-menu {
    width: 500px;
}

body.offcanvas-open .body-wrapper {
    transform: translateX(-350px);
}

.view-featured #sp-component,
.view-featured .blog-featured,
.view-featured .items-leading,
.view-featured .item {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.article-details,
.article,
.sp-page-builder .sppb-addon-article {
    border: none !important;
    box-shadow: none !important;
}

.badge-featured,
.featured,
.label-featured,
.badge,
span[class*="feature"] {
    display: none !important;
}

.nav-item.current > a[href*="home"],
.nav-item.active.current,
li.sp-menu-item.current-item > a {
    display: none;
}


/* ==========================================================
   03. Footer-Menü responsive
   Desktop: rechtsbündig in einer Reihe
   Tablet:  2 Spalten zentriert
   Mobile:  1 Spalte zentriert
   ========================================================== */

.footer-vertical ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

.footer-vertical ul li {
    width: auto !important;
    text-align: right;
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .footer-vertical ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        justify-items: center !important;
        justify-content: center !important;
        gap: 8px 24px !important;
        text-align: center !important;
    }

    .footer-vertical ul li,
    .footer-vertical ul li a {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }
}

@media (max-width: 575.98px) {
    .footer-vertical ul {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
    }

    .footer-vertical ul li,
    .footer-vertical ul li a {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }
}


/* ==========================================================
   04. Joomla Login / Registrierung
   ========================================================== */

.login .com-users-login__links,
.login .com-users-login__options,
.login .form-links,
.login .login-bottom-links {
    text-align: center;
}

.login .well,
.login .card,
.login form {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.form-control-required,
.star,
.required::after {
    display: none !important;
}

.com_users .com-users-registration__form input,
.com_users .com-users-registration__form select,
.com_users .com-users-registration__form textarea,
.com_users .com-users-registration__form .form-control,
.com_users .field-user-customfields input,
.com_users .field-user-customfields select,
.com_users .field-user-customfields textarea {
    background: var(--mb-white) !important;
    background-color: var(--mb-white) !important;
}

label[for*="gdpr"] {
    margin-left: 20px;
}

.cc-close {
    display: none !important;
}


/* ==========================================================
   05. Globale Formular- und Fokusfarben
   Normal: schwarzer Rahmen
   Fokus:  rosa Rahmen
   ========================================================== */

.form-control,
.form-select,
textarea,
select,
input {
    border-color: var(--mb-border) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus,
input:focus {
    border-color: var(--mb-accent) !important;
    box-shadow: none !important;
    outline: none !important;
}


/* ==========================================================
   06. JoomHelpDesk – Grundfarben / Links / Navigation
   ========================================================== */

#joomhelpdesk a,
.joomhelpdesk a,
.joomhelpdesk_main a,
.joomhelpdesk_main a {
    color: var(--mb-text) !important;
}

#joomhelpdesk a:hover,
#joomhelpdesk a:focus,
.joomhelpdesk a:hover,
.joomhelpdesk a:focus,
.joomhelpdesk_main a:hover,
.joomhelpdesk_main a:focus,
.joomhelpdesk_main a:hover,
.joomhelpdesk_main a:focus {
    color: var(--mb-accent) !important;
}

#joomhelpdesk a.nav-link,
.joomhelpdesk a.nav-link,
.joomhelpdesk_main a.nav-link {
    color: var(--mb-text) !important;
}

#joomhelpdesk a.nav-link:hover,
.joomhelpdesk a.nav-link:hover,
.joomhelpdesk_main a.nav-link:hover {
    color: var(--mb-accent) !important;
}

.dropdown-header,
.dropdown-item {
    color: var(--mb-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--mb-accent) !important;
    background: transparent !important;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item.active:hover,
.dropdown-item.active:focus {
    color: var(--mb-text) !important;
    background-color: var(--mb-accent) !important;
}

.dropdown-menu {
    border-color: var(--mb-border) !important;
}


/* ==========================================================
   07. JoomHelpDesk – Meldungen / Alerts
   Normal: schwarzer Rahmen
   ========================================================== */

.alert.alert-info {
    background: transparent !important;
    border: 1px solid var(--mb-border) !important;
    box-shadow: none !important;
    color: var(--mb-text) !important;
    border-radius: 6px;
}

.alert.alert-info i,
.alert.alert-info .fas {
    color: var(--mb-text) !important;
}


/* ==========================================================
   08. JoomHelpDesk – Buttons
   Normal: schwarzer Text, schwarzer Rahmen, transparenter Hintergrund
   Hover:  rosa Text, transparenter Hintergrund, rosa Rahmen
   Aktiv:  rosa Hintergrund, schwarzer Text, rosa Rahmen
   ========================================================== */

.btn-outline-primary,
.btn.btn-outline-secondary,
.joomhelpdesk_main .btn-danger,
.proddept-card-select .btn-outline-primary {
    color: var(--mb-text) !important;
    border-color: var(--mb-border) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus,
.joomhelpdesk_main .btn-danger:hover,
.joomhelpdesk_main .btn-danger:focus,
.proddept-card-select .btn-outline-primary:hover,
.proddept-card-select .btn-outline-primary:focus {
    color: var(--mb-accent) !important;
    background: transparent !important;
    border-color: var(--mb-accent) !important;
    box-shadow: none !important;
}

.btn-outline-primary.active,
.btn-outline-primary:active,
.btn.btn-outline-secondary.active,
.btn.btn-outline-secondary:active,
.btn.btn-outline-secondary.show,
.joomhelpdesk_main .btn-danger.active,
.joomhelpdesk_main .btn-danger:active,
.btn-check:checked + .btn-outline-primary,
.proddept-card-select .btn-outline-primary.active,
.proddept-card-select .btn-outline-primary:active,
.proddept-card-select .btn-check:checked + .btn-outline-primary {
    color: var(--mb-text) !important;
    background-color: var(--mb-accent) !important;
    border-color: var(--mb-accent) !important;
    box-shadow: none !important;
}

.btn-outline-primary.active:hover,
.btn-outline-primary:active:hover,
.btn.btn-outline-secondary.active:hover,
.btn.btn-outline-secondary:active:hover,
.joomhelpdesk_main .btn-danger.active:hover,
.joomhelpdesk_main .btn-danger:active:hover,
.btn-check:checked + .btn-outline-primary:hover {
    color: var(--mb-text) !important;
    background-color: var(--mb-accent) !important;
    border-color: var(--mb-accent) !important;
}

.btn.btn-outline-secondary i,
.btn.btn-outline-secondary .fas {
    color: var(--mb-text) !important;
}


/* ==========================================================
   09. JoomHelpDesk – Produkt-/Abteilungskarten
   Normal: schwarzer Rahmen
   Hover/Aktiv: rosa Rahmen
   Text: mittig
   ========================================================== */

.proddept-card,
.proddept-card-inner {
    border-color: var(--mb-border) !important;
}

.proddept-card:hover,
.proddept-card:hover .proddept-card-inner,
.proddept-card-inner:hover,
.proddept-card.active,
.proddept-card.selected,
.proddept-card.active .proddept-card-inner,
.proddept-card.selected .proddept-card-inner {
    border-color: var(--mb-accent) !important;
    box-shadow: none !important;
}

.proddept-card-inner:focus,
.proddept-card-inner:focus-visible,
.proddept-card-inner:hover {
    box-shadow: none !important;
    outline: none !important;
}

.proddept-card,
.proddept-card-inner,
.proddept-card-content,
.proddept-card-select,
.proddept-card-image,
.proddept-card-title,
.proddept-card-desc {
    text-align: center !important;
}

.proddept-card-select {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==================================================
   JOOMHELPDESK - Zurück Button
   ================================================== */

.btn.btn-light.border.backprod {
    color: #000000 !important;
    background: transparent !important;
    border-color: #000000 !important;
    box-shadow: none !important;
}

.btn.btn-light.border.backprod:hover,
.btn.btn-light.border.backprod:focus {
    color: #e0a9d0 !important;
    background: transparent !important;
    border-color: #000000 !important;
    box-shadow: none !important;
}

.btn.btn-light.border.backprod:active,
.btn.btn-light.border.backprod.active {
    color: #000000 !important;
    background-color: #e0a9d0 !important;
    border-color: #000000 !important;
}

/* ==================================================
   JOOMHELPDESK - Anzeige Dropdown
   ================================================== */

.limit,
.limit label {
    color: #000000 !important;
}

.limit .form-select {
    color: #000000 !important;
    border-color: #000000 !important;
    background-color: transparent !important;
}

/* Fokus */
.limit .form-select:focus {
    border-color: #e0a9d0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ==================================================
   JOOMHELPDESK - Anzeige Dropdown
   ================================================== */

/* Dropdown */
.limit .form-select {
    color: #000000 !important;
    border: 1px solid #000000 !important;
    background: #ffffff !important;
}

/* Optionen */
.limit .form-select option {
    color: #000000 !important;
    background: #ffffff !important;
}

/* Markierte Option */
.limit .form-select option:checked,
.limit .form-select option:hover,
.limit .form-select option:focus {
    color: #000000 !important;
    background: #ffffff !important;
}

/* ==================================================
   JOOMHELPDESK - Produktkarten immer schwarzer Rahmen
   ================================================== */

.proddept-card,
.proddept-card-inner,
.proddept-card:hover,
.proddept-card:hover .proddept-card-inner,
.proddept-card.active,
.proddept-card.selected,
.proddept-card.active .proddept-card-inner,
.proddept-card.selected .proddept-card-inner,
.proddept-card-inner:hover,
.proddept-card-inner:focus,
.proddept-card-inner:focus-visible {
    border-color: #000000 !important;
    box-shadow: none !important;
    outline: none !important;
}


/* ==========================================================
   10. JoomHelpDesk – Fieldsets / Cards / Custom Fields
   Normal: schwarzer Rahmen
   Fokus: rosa Rahmen
   ========================================================== */

fieldset.card {
    background: transparent !important;
    border: 1px solid var(--mb-border) !important;
    box-shadow: none !important;
}

fieldset.card .card-body {
    background: transparent !important;
    color: var(--mb-text) !important;
}

legend.card-header,
fieldset.card legend.card-header {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mb-text) !important;
    border: none !important;
    border-bottom: 1px solid var(--mb-border) !important;
    box-shadow: none !important;
}

legend.card-header:hover {
    color: var(--mb-accent) !important;
}

fieldset.card .form-label,
fieldset.card .form-text,
fieldset.card .text-muted,
fieldset.card .help-inline {
    color: var(--mb-text) !important;
}

fieldset.card .form-control,
.joomhelpdesk_main .form-control,
.joomhelpdesk_main .form-select,
.joomhelpdesk_main textarea {
    border-color: var(--mb-border) !important;
    color: var(--mb-text) !important;
    background: transparent !important;
}

fieldset.card .form-control:focus,
.joomhelpdesk_main .form-control:focus,
.joomhelpdesk_main .form-select:focus,
.joomhelpdesk_main textarea:focus {
    border-color: var(--mb-accent) !important;
    box-shadow: none !important;
    outline: none !important;
}

fieldset.card .form-control::placeholder,
.joomhelpdesk_main .form-control::placeholder {
    color: var(--mb-placeholder) !important;
}

.form-text,
.text-muted,
.help-inline {
    color: var(--mb-text) !important;
}


/* ==========================================================
   11. JoomHelpDesk – Upload-Zonen
   Normal: schwarz gestrichelt
   Hover/Aktiv: rosa gestrichelt
   ========================================================== */

.custfield-dropzone {
    border: 2px dashed var(--mb-border) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.custfield-dropzone:hover,
.custfield-dropzone.dragover,
.custfield-dropzone.active,
.custfield-dropzone:focus,
.custfield-dropzone:focus-within {
    border: 2px dashed var(--mb-accent) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.custfield-dropzone p,
.custfield-dropzone .text-muted,
.custfield-dropzone i {
    color: var(--mb-text) !important;
}


/* ==========================================================
   12. Globale Rahmen-Korrektur am Ende
   Sorgt dafür, dass normale Bootstrap-Rahmen nicht wieder rosa/blau werden.
   Ausgenommen sind bewusst Hover/Fokus/Aktiv-Regeln oben.
   ========================================================== */

.joomhelpdesk_main .card,
.joomhelpdesk_main fieldset,
.joomhelpdesk_main .alert,
.joomhelpdesk_main .dropdown-menu,
.joomhelpdesk_main .btn,
.joomhelpdesk_main .form-control,
.joomhelpdesk_main .form-select {
    border-color: var(--mb-border) !important;
}

.joomhelpdesk_main .btn:hover,
.joomhelpdesk_main .btn:focus,
.joomhelpdesk_main .btn:active,
.joomhelpdesk_main .btn.active,
.joomhelpdesk_main .form-control:focus,
.joomhelpdesk_main .form-select:focus {
    border-color: var(--mb-accent) !important;
    box-shadow: none !important;
}


/* ==========================================================
MULTIBETON JoomHelpDesk-Branding (verschoben aus
plg_system_mbjhdstyle am 13.09.2026, damit alles an einer
Stelle direkt im Backend bearbeitbar ist statt in einem
Plugin, das nur per ZIP-Update geaendert werden kann)
========================================================== */
.joomhelpdesk_main .btn-success,
.joomhelpdesk_main .btn-primary {
	background-color: #e0a9d0 !important;
	border-color: #e0a9d0 !important;
	color: #000000 !important;
}
.joomhelpdesk_main .btn-success:hover,
.joomhelpdesk_main .btn-primary:hover {
	background-color: #d090bd !important;
	border-color: #d090bd !important;
	color: #000000 !important;
}
.joomhelpdesk_main .btn-info {
	background-color: #000000 !important;
	border-color: #000000 !important;
	color: #ffffff !important;
}
.joomhelpdesk_main .btn-info:hover {
	background-color: #2a2a2a !important;
	border-color: #2a2a2a !important;
	color: #ffffff !important;
}
.tr_cf_geraete_id_referenz a.mb-geraeteakte-link {
	color: #000000 !important;
	text-decoration: underline !important;
	font-weight: 600;
}
.tr_cf_geraete_id_referenz a.mb-geraeteakte-link:hover {
	color: #e0a9d0 !important;
}
.joomhelpdesk_main #jhd-timer-start {
	background-color: #e0a9d0 !important;
	border-color: #e0a9d0 !important;
	color: #000000 !important;
}
.joomhelpdesk_main #jhd-timer-start:hover {
	background-color: #d090bd !important;
	border-color: #d090bd !important;
	color: #000000 !important;
}
.joomhelpdesk_main #jhd-timer-pause,
.joomhelpdesk_main #jhd-timer-stop {
	background-color: transparent !important;
	border-color: #000000 !important;
	color: #000000 !important;
}
.joomhelpdesk_main #jhd-timer-pause:hover,
.joomhelpdesk_main #jhd-timer-stop:hover {
	background-color: #e0a9d0 !important;
	border-color: #e0a9d0 !important;
	color: #000000 !important;
}
.joomhelpdesk_main .badge.bg-warning {
	background-color: #000000 !important;
	color: #ffffff !important;
}
.joomhelpdesk_main .pagination .page-link {
	color: #000000 !important;
	border-color: #000000 !important;
}
.joomhelpdesk_main .pagination .page-link:hover,
.joomhelpdesk_main .pagination .page-link:focus {
	background-color: #e0a9d0 !important;
	border-color: #e0a9d0 !important;
	color: #000000 !important;
}
.joomhelpdesk_main .pagination .page-item.active .page-link {
	background-color: #e0a9d0 !important;
	border-color: #e0a9d0 !important;
	color: #000000 !important;
}
.joomhelpdesk_main .pagination .page-item.disabled .page-link {
	color: #999999 !important;
	border-color: #cccccc !important;
}
a[data-role="gdpr_privacy_policy"] {
	display: inline-block !important;
	padding: 0.35rem 0.9rem !important;
	background-color: #000000 !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	font-size: 13px !important;
}
a[data-role="gdpr_privacy_policy"]:hover {
	background-color: #e0a9d0 !important;
}
a[data-role="gdpr_privacy_policy"] label {
	color: #ffffff !important;
}
a[data-role="gdpr_privacy_policy"]:hover label {
	color: #000000 !important;
}
a[data-role="gdpr_privacy_policy"] label {
	margin-left: 0 !important;
}

.joomhelpdesk_mainmenu_support_panel {
	flex-wrap: wrap !important;
	gap: 0.5rem 1.5rem;
}

a[data-role="gdpr_dynamic_privacy_policy_checkbox"] {
	display: inline-block !important;
	padding: 0.35rem 0.9rem !important;
	background-color: #000000 !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	font-size: 13px !important;
}
a[data-role="gdpr_dynamic_privacy_policy_checkbox"]:hover {
	background-color: #e0a9d0 !important;
}
a[data-role="gdpr_dynamic_privacy_policy_checkbox"] label {
	color: #ffffff !important;
	margin: 0 !important;
}
a[data-role="gdpr_dynamic_privacy_policy_checkbox"]:hover label {
	color: #000000 !important;
}

.joomhelpdesk_main .form-group {
	margin-bottom: 1rem !important;
}