/* Globale Hintergrundfarbe für das gesamte Cockpit */
body {
    background-color: rgb(247, 247, 247) !important;
    color: rgb(87, 88, 89) !important;
}

/* Hauptüberschriften automatisch Beerenrot */
h1, .page-header h1 {
    color: rgb(161, 76, 118) !important;
}

/* Links im Text bei Hover Rosa einfärben */
a:hover {
    color: rgb(205, 166, 189) !important;
}

/* ==========================================================================
   1. ERFOLGSMELDUNGEN (Erfolgreich abgemeldet etc.) - Echtes Beerenrot
   ========================================================================== */
#system-message-container joomla-alert[type="success"] {
    border-color: #a14c76 !important;
    background-color: #f7eff3 !important; /* Ganz softes Hintergrund-Rosa */
}
#system-message-container joomla-alert[type="success"] .alert-heading {
    background-color: #a14c76 !important;
}
#system-message-container joomla-alert[type="success"] button.joomla-alert--close {
    color: #a14c76 !important;
}

/* ==========================================================================
   2. FEHLERMELDUNGEN (Bitte zuerst anmelden etc.) - Edles Weinrot & Rosa
   ========================================================================== */
#system-message-container joomla-alert[type="danger"] {
    border-color: #6b2c49 !important; /* Dunkles Weinrot für "Achtung" */
    background-color: #cea3ba !important; /* Ihr vorgeschlagenes Rosa als Hintergrund! */
    color: #3d1426 !important; /* Dunkler Text für perfekte Lesbarkeit auf Rosa */
}
#system-message-container joomla-alert[type="danger"] .alert-heading {
    background-color: #6b2c49 !important; /* Dunkles Weinrot für das Icon-Feld */
}
#system-message-container joomla-alert[type="danger"] button.joomla-alert--close {
    color: #6b2c49 !important;
}

/* Globale Überordnung für Joomlas MFA-Bereich */
form#com-users-mfa-form .btn-danger,
#com-users-mfa-form button,
.com-users-mfa .btn-danger,
body .btn-danger[onclick*="mfa"],
div [class*="mfa"] .btn-danger {
    background-color: #6b2c49 !important;
    background: #6b2c49 !important;
    border-color: #542037 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Hover-Zustand */
form#com-users-mfa-form .btn-danger:hover,
#com-users-mfa-form button:hover,
.com-users-mfa .btn-danger:hover {
    background-color: #542037 !important;
    background: #542037 !important;
    border-color: #3d1426 !important;
}
/* 1. Den ehemals grünen Upload-Button in Ihr Marken-Beerenrot umfärben */
.hdp-container .dz-button {
    background-color: #a14c76 !important;
    border-color: #8c3e65 !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* Hover-Effekt für den Button beim Drüberfahren */
.hdp-container .dz-button:hover {
    background-color: #8c3e65 !important;
    border-color: #753153 !important;
}

/* Färbt die grüne Upload-Wolke ebenfalls in Marken-Beerenrot um */
.hdp-upload-icon svg {
    fill: #a14c76 !important;
    color: #a14c76 !important;
}


/* Färbt alle Hauptüberschriften (H1) im Portal in Ihr Marken-Beerenrot */
h1, .page-header h1, .com-content-article h1 {
    color: #a14c76 !important;
}

/* Optional: Falls Sie auch die Unterüberschriften (H2) mitziehen möchten */
h2, .com-content-article h2 {
    color: #a14c76 !important;
}

/* Blendet die Vergessen-Links ausschließlich im linken Login-Modul aus */
.mod-login div[class*="links"],
.mod-login ul,
.mod-login__links {
    display: none !important;
}

/* Blendet die komplette Login-/Abmelde-Maske und Vergessen-Links NUR in der System-Mitte aus */
main .com-users-login,
main .com-users-login__links,
main .com-users-login div.form-group,
main #system-message-container + div.login {
    display: none !important;
}

/* Blendet den Abmelden-Button in der Mitte über die Formularstruktur komplett aus */
main #system-message-container + div form[action*="task=user.logout"],
main form[action*="user.logout"],
main .com-users-logout__form,
main button[id^="submit-button"] {
    display: none !important;
}

/* Den dunkelblauen Tabellen-Header exakt ansprechen */
th.hdp-ticket-details-heading.bg-primary {
    background-color: #a14c76 !important;
    background: #a14c76 !important;
}

/* Falls die Buttons oben auch Bootstrap-Klassen nutzen */
.ticket-actions .btn-primary,
.ticket-actions .dropdown-toggle {
    background-color: #a14c76 !important;
    border-color: #a14c76 !important;
}

/* Rechte Box ausblenden */
#hdp-right-panel-container {
    display: none !important;
}

/* Linken Bereich auf volle Breite strecken */
#hdp-left-panel-container {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Bringt ein visuelles Signal für ungelesene/neue Antworten im Kommentarbereich (Optional) */
.hdp-comment-admin {
    border-left: 4px solid #a14c76 !important;
    background-color: rgba(161, 76, 118, 0.05) !important;
}

/* Die dunkelblauen Avatar-Kreise exakt ansprechen und auf Beerenrot umfärben */
.hdp-ticket-comment-avatar.bg-primary {
    background-color: #a14c76 !important;
    background: #a14c76 !important;
}

/* Die Avatare und das Kommentarzähler-Badge fehlerfrei auf Marken-Beerenrot umfärben */
.hdp-ticket-comment-avatar.bg-primary,
.hdp-number-comments-badge.badge.bg-primary {
    background-color: #a14c76 !important;
    background: #a14c76 !important;
}

/* Mülleimer-Button standardmäßig unauffällig und transparent machen */
.hdp-delete-comment-button.btn-danger,
.btn-danger.hdp-delete-comment-button {
    background-color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    color: #6c757d !important; /* Dezentes Dunkelgrau für das Icon */
    box-shadow: none !important;
    padding: 0 5px !important;
}

/* Der Mülleimer wird erst beim Drüberfahren (Hover) elegant rosa */
.hdp-delete-comment-button.btn-danger:hover,
.btn-danger.hdp-delete-comment-button:hover {
    background-color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    color: #cea3ba !important; /* Schaltet das Icon auf dein Design-Rosa um */
}

/* Den hellblauen Hintergrund der Dateianhänge auf ein weiches Design-Rosa umfärben */
.hdp-attachments-container,
ul.hdp-attachments-container {
    background-color: rgba(206, 163, 186, 0.15) !important; /* Nutzt dein Rosa als eleganten, transparenten Pastell-Hintergrund */
    border-left: 3px solid #cea3ba !important; /* Fügt eine feine Design-Kante hinzu */
}

/* Globale Joomla-Schriftvariablen für Überschriften anpassen */
:root {
    --h1size: 1.7rem !important;
    --h2size: 1.4rem !important;
    --h3size: 1.2rem !important;
}

/* Hard-Override für den Beitrags-Titel im Frontend */
h1.page-title, .page-header h1, h1 {
    font-size: 1.7rem !important;
    line-height: 1.3 !important;
}

/* Erzeugte CSS-Variablen direkt an der Formular-ID überschreiben */
#cf_2, .convertforms {
    --color-success: #a14c76 !important; /* Biegt das Standard-Grün auf Beerenrot um */
}

/* Den Hintergrund und den Rahmen der Box aus deinem Code-Screenshot zwingen */
#cf_2_response, 
#cf_2 .cf-response-message {
    background-color: #f7eff3 !important; /* Ganz softes Hintergrund-Rosa */
    border: 1px solid #a14c76 !important;  /* Beerenroter Rahmen */
    color: #a14c76 !important;            /* Textfarbe Beerenrot */
}

/* Falls der Text im Kasten (<p>-Tag) eine eigene Farbe erzwingen will */
#cf_2_response p {
    color: #a14c76 !important;
}

/* Unmanipulierbarer globaler Override für Convert Forms Erfolgsmeldungen */
.convertforms .cf-response-message.cf-success,
.convertforms .cf-response-message,
.cf-form-submitted .cf-response-message,
div[id^="cf-form-"] .cf-response-message {
    background-color: #f7eff3 !important; /* Ganz softes Hintergrund-Rosa */
    color: #a14c76 !important;            /* Textfarbe in Beerenrot */
    border: 1px solid #a14c76 !important;  /* Rahmen in Beerenrot */
    font-weight: 500 !important;
    padding: 12px 20px !important;
    border-radius: 4px !important;
}