/* =========================================================
   FEUERWEHR WÄNGLE – DUNKLES DESIGN
   ========================================================= */


/* ---------------------------------------------------------
   1. Farbvariablen
   --------------------------------------------------------- */

:root {
    --fw-dark: #2b2b2b;
    --fw-dark-light: #353535;
    --fw-dark-lighter: #414141;
    --fw-border: #555555;

    --fw-white: #ffffff;
    --fw-muted: #d5d5d5;

    --fw-red: #e30613;
    --fw-red-dark: #b80510;

    --fw-hover: #d3d3d3;
    --fw-hover-text: #1f1f1f;
}


/* ---------------------------------------------------------
   2. Gesamte Webseite dunkelgrau
   --------------------------------------------------------- */

html,
body {
    background-color: var(--fw-dark) !important;
    color: var(--fw-white) !important;
}


/* Hauptbereiche */
body,
.site-grid,
.site-grid > *,
main,
main > *,
.container-component,
.container-component > *,
.com-content,
.com-content-article,
.item-page,
.blog,
.blog-item,
.category-list,
.com-content-category-blog {
    background-color: var(--fw-dark) !important;
    color: var(--fw-white) !important;
}


/* ---------------------------------------------------------
   3. Header dunkelgrau
   --------------------------------------------------------- */

.container-header {
    background: var(--fw-dark) !important;
    color: var(--fw-white) !important;
}


/* Service Portal */
.container-header .site-description {
    color: var(--fw-white) !important;
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   4. Menübereich feuerwehrrot
   --------------------------------------------------------- */

.container-header .container-nav {
    background: var(--fw-red) !important;
}


/* Menüeinträge */
.container-header .container-nav .mod-menu > li > a,
.container-header .container-nav .mod-menu > li > span,
.container-header .container-nav .mod-menu a,
.container-header .container-nav .mod-menu button {
    background-color: transparent !important;
    color: var(--fw-white) !important;
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   5. Menü Mouse-over: hellgrau
   --------------------------------------------------------- */

.container-header .container-nav .mod-menu > li > a:hover,
.container-header .container-nav .mod-menu > li > a:focus,
.container-header .container-nav .mod-menu a:hover,
.container-header .container-nav .mod-menu a:focus,
.container-header .container-nav .mod-menu button:hover,
.container-header .container-nav .mod-menu button:focus {
    background-color: var(--fw-hover) !important;
    color: var(--fw-hover-text) !important;
}


/* Aktiver Menüpunkt */
.container-header .container-nav .mod-menu .current > a,
.container-header .container-nav .mod-menu .active > a {
    background-color: var(--fw-hover) !important;
    color: var(--fw-hover-text) !important;
}


/* ---------------------------------------------------------
   6. Untermenüs
   --------------------------------------------------------- */

.container-header .container-nav .mod-menu .mm-collapse {
    background-color: var(--fw-red-dark) !important;
}


.container-header .container-nav .mod-menu .mm-collapse a,
.container-header .container-nav .mod-menu .mm-collapse button {
    background-color: transparent !important;
    color: var(--fw-white) !important;
}


/* Untermenü Mouse-over */
.container-header .container-nav .mod-menu .mm-collapse a:hover,
.container-header .container-nav .mod-menu .mm-collapse a:focus,
.container-header .container-nav .mod-menu .mm-collapse button:hover,
.container-header .container-nav .mod-menu .mm-collapse button:focus {
    background-color: var(--fw-hover) !important;
    color: var(--fw-hover-text) !important;
}


/* ---------------------------------------------------------
   7. Mobiler Menübutton
   --------------------------------------------------------- */

.container-header .navbar-toggler {
    background-color: transparent !important;
    color: var(--fw-white) !important;
    border: 1px solid var(--fw-white) !important;
}


/* Drei Striche */
.container-header .navbar-toggler-icon {
    filter: none !important;
}


/* ---------------------------------------------------------
   8. Überschriften
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.page-header h1,
.page-header h2,
.page-header .heading {
    color: var(--fw-white) !important;
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   9. Texte und Listen
   --------------------------------------------------------- */

p,
li,
label,
dt,
dd,
address,
blockquote {
    color: var(--fw-white) !important;
}


/* Links */
a {
    color: #ff6870 !important;
}


a:hover,
a:focus {
    color: var(--fw-white) !important;
}


/* ---------------------------------------------------------
   10. Karten, Module und Inhaltsboxen
   --------------------------------------------------------- */

.card,
.moduletable,
.module,
.blog-item,
.com-content-article__body,
fieldset {
    background-color: var(--fw-dark-light) !important;
    color: var(--fw-white) !important;
    border-color: var(--fw-border) !important;
}


/* ---------------------------------------------------------
   11. Tabellen
   --------------------------------------------------------- */

table {
    background-color: var(--fw-dark-light) !important;
    color: var(--fw-white) !important;
    border-color: var(--fw-border) !important;
}


table th {
    background-color: var(--fw-red) !important;
    color: var(--fw-white) !important;
}


table td {
    background-color: var(--fw-dark-light) !important;
    color: var(--fw-white) !important;
    border-color: var(--fw-border) !important;
}


/* ---------------------------------------------------------
   12. Formulare und Eingabefelder
   --------------------------------------------------------- */

input,
textarea,
select,
.form-control {
    background-color: var(--fw-dark-lighter) !important;
    color: var(--fw-white) !important;
    border: 1px solid var(--fw-border) !important;
}


input::placeholder,
textarea::placeholder {
    color: var(--fw-muted) !important;
}


input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    background-color: #4a4a4a !important;
    color: var(--fw-white) !important;
    border-color: var(--fw-red) !important;
}


/* ---------------------------------------------------------
   13. Buttons
   --------------------------------------------------------- */

.btn,
button,
input[type="submit"],
input[type="button"] {
    font-weight: 700 !important;
}


.btn-primary,
.btn-danger,
button[type="submit"],
input[type="submit"] {
    background-color: var(--fw-red) !important;
    border-color: var(--fw-red) !important;
    color: var(--fw-white) !important;
}


.btn-primary:hover,
.btn-danger:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--fw-red-dark) !important;
    border-color: var(--fw-red-dark) !important;
    color: var(--fw-white) !important;
}


.btn-secondary {
    background-color: #555555 !important;
    border-color: #777777 !important;
    color: var(--fw-white) !important;
}


.btn-secondary:hover {
    background-color: #707070 !important;
    color: var(--fw-white) !important;
}


/* ---------------------------------------------------------
   14. Trennlinien und Rahmen
   --------------------------------------------------------- */

hr,
.border,
.border-top,
.border-bottom {
    border-color: var(--fw-border) !important;
}


/* ---------------------------------------------------------
   15. Footer
   --------------------------------------------------------- */

.footer,
footer {
    background-color: #202020 !important;
    color: var(--fw-white) !important;
}


.footer a,
footer a {
    color: #ff6870 !important;
}


/* ---------------------------------------------------------
   16. Joomla-Meldungen
   --------------------------------------------------------- */

.alert,
.alert-info,
.alert-success,
.alert-warning,
.alert-danger {
    background-color: var(--fw-dark-light) !important;
    color: var(--fw-white) !important;
    border-color: var(--fw-border) !important;
}
/* =========================================================
   NACHTRÄGLICHE ANPASSUNGEN
   Dunkelgraue Joomla-Bereiche und hellroter Menü-Hover
   ========================================================= */


/* ---------------------------------------------------------
   1. Alle Joomla-Anmelde- und Benutzerbereiche dunkelgrau
   --------------------------------------------------------- */

.login,
.login form,
.login-fields,
.com-users-login,
.com-users-login form,
.com-users-reset,
.com-users-reset form,
.com-users-remind,
.com-users-remind form,
.com-users-profile,
.com-users-profile form,
.com-users-wrapper,
.com-users-wrapper form,
.registration,
.registration form {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}


/* Joomla-Karten und Karteninhalte */
.login .card,
.login .card-body,
.com-users-login .card,
.com-users-login .card-body,
.com-users-reset .card,
.com-users-reset .card-body,
.com-users-remind .card,
.com-users-remind .card-body,
.com-users-wrapper .card,
.com-users-wrapper .card-body {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}


/* ---------------------------------------------------------
   2. Passwort- und Benutzername-Links dunkel darstellen
   --------------------------------------------------------- */

.login .list-group,
.login .list-group-item,
.com-users-login .list-group,
.com-users-login .list-group-item,
.com-users-wrapper .list-group,
.com-users-wrapper .list-group-item {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}


/* Links innerhalb dieser Bereiche */
.login .list-group-item a,
.com-users-login .list-group-item a,
.com-users-wrapper .list-group-item a {
    background-color: transparent !important;
    color: #ff6870 !important;
}


/* Hover bei Passwort- und Benutzernamen-Links */
.login .list-group-item a:hover,
.com-users-login .list-group-item a:hover,
.com-users-wrapper .list-group-item a:hover {
    background-color: #414141 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   3. Beschriftungen und Texte auf Benutzerseiten
   --------------------------------------------------------- */

.login label,
.login p,
.login legend,
.login .form-text,
.com-users-login label,
.com-users-login p,
.com-users-login legend,
.com-users-reset label,
.com-users-reset p,
.com-users-remind label,
.com-users-remind p,
.com-users-wrapper label,
.com-users-wrapper p {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   4. Eingabefelder auf den Login-Seiten
   --------------------------------------------------------- */

.login input,
.login textarea,
.login select,
.com-users-login input,
.com-users-login textarea,
.com-users-login select,
.com-users-reset input,
.com-users-reset textarea,
.com-users-reset select,
.com-users-remind input,
.com-users-remind textarea,
.com-users-remind select {
    background-color: #414141 !important;
    color: #ffffff !important;
    border-color: #666666 !important;
}


/* Platzhalter */
.login input::placeholder,
.com-users-login input::placeholder,
.com-users-reset input::placeholder,
.com-users-remind input::placeholder {
    color: #d0d0d0 !important;
}


/* ---------------------------------------------------------
   5. Menü: Mouse-over etwas helleres Rot
   --------------------------------------------------------- */

.container-header .container-nav .mod-menu > li > a:hover,
.container-header .container-nav .mod-menu > li > a:focus,
.container-header .container-nav .mod-menu a:hover,
.container-header .container-nav .mod-menu a:focus,
.container-header .container-nav .mod-menu button:hover,
.container-header .container-nav .mod-menu button:focus {
    background-color: #ff3b45 !important;
    color: #ffffff !important;
}


/* Aktiver Menüpunkt ebenfalls etwas helleres Rot */
.container-header .container-nav .mod-menu .current > a,
.container-header .container-nav .mod-menu .active > a {
    background-color: #ff3b45 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   6. Untermenüs: ebenfalls hellroter Mouse-over
   --------------------------------------------------------- */

.container-header .container-nav .mod-menu .mm-collapse a:hover,
.container-header .container-nav .mod-menu .mm-collapse a:focus,
.container-header .container-nav .mod-menu .mm-collapse button:hover,
.container-header .container-nav .mod-menu .mm-collapse button:focus {
    background-color: #ff3b45 !important;
    color: #ffffff !important;
}
/* =========================================================
   Meldungen: weißer Hintergrund und schwarze Schrift
   ========================================================= */

/* Hintergrund der Meldung wieder weiß */
.alert,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.alert-message {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #d5d5d5 !important;
}


/* Meldungstext schwarz */
.alert .alert-message,
.alert .alert-heading,
.alert p,
.alert-success .alert-message,
.alert-success .alert-heading,
.alert-success p {
    color: #000000 !important;
}


/* Links innerhalb der Meldung */
.alert a,
.alert-success a {
    color: #e30613 !important;
}


/* Link bei Mouse-over */
.alert a:hover,
.alert-success a:hover {
    color: #b80510 !important;
}
/* =========================================================
   FEUERWEHR-KASSA – DUNKELGRAUER HINTERGRUND
   ========================================================= */


/* Gesamte Kassa-Komponente */
.fwkasse-app {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}


/* Kassa-Hauptbereich */
.fwkasse-app .fwkasse-hero {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}



/* Gedämpfte Beschriftungen */
.fwkasse-app .fwkasse-muted {
    color: #d5d5d5 !important;
}


/* Aktueller Kontostand */
.fwkasse-app .fwkasse-balance {
    color: #ffffff !important;
}


/* Weiße Flächen innerhalb der Kassa überschreiben */
.fwkasse-app .card,
.fwkasse-app .panel,
.fwkasse-app .box,
.fwkasse-app section,
.fwkasse-app article {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}


/* Eingabefelder innerhalb der Kassa */
.fwkasse-app input,
.fwkasse-app textarea,
.fwkasse-app select {
    background-color: #414141 !important;
    color: #ffffff !important;
    border-color: #666666 !important;
}


/* Platzhalter */
.fwkasse-app input::placeholder,
.fwkasse-app textarea::placeholder {
    color: #d5d5d5 !important;
}


/* Kassa-Buttons */
.fwkasse-app button,
.fwkasse-app .btn {
    color: #ffffff !important;
    font-weight: 700 !important;
}


/* Feuerwehrrote Hauptbuttons */
.fwkasse-app button[type="submit"],
.fwkasse-app .btn-primary {
    background-color: #e30613 !important;
    border-color: #e30613 !important;
    color: #ffffff !important;
}


/* Button-Mouse-over */
.fwkasse-app button:hover,
.fwkasse-app .btn:hover {
    background-color: #ff3b45 !important;
    border-color: #ff3b45 !important;
    color: #ffffff !important;
}
/* =========================================================
   FEUERWEHR-KASSA – GEZIELTE ANPASSUNGEN
   ========================================================= */


/* ---------------------------------------------------------
   1. Logout-Timer exakt ansprechen
   --------------------------------------------------------- */

#fwk-kiosk-timeout {
    background-color: #2b2b2b !important;
    color: #ffeb00 !important;
    border: 2px solid #ffeb00 !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
}


/* Alle Elemente innerhalb des Timers */
#fwk-kiosk-timeout *,
#fwk-kiosk-timeout.alert,
#fwk-kiosk-timeout.alert-warning {
    background-color: #2b2b2b !important;
    color: #ffeb00 !important;
}


/* Timer-Rahmen auch bei Fokus */
#fwk-kiosk-timeout:focus,
#fwk-kiosk-timeout:focus-within {
    border-color: #ffeb00 !important;
    box-shadow: 0 0 0 2px rgba(255, 235, 0, 0.25) !important;
}


/* ---------------------------------------------------------
   2. Weiße Flächen innerhalb der Kassa vermeiden
   --------------------------------------------------------- */

.fwkasse-app .card,
.fwkasse-app .card-body,
.fwkasse-app .panel,
.fwkasse-app section,
.fwkasse-app article {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}


/* Kassa-Buttons grundsätzlich dunkelgrau */
.fwkasse-app button {
    background-color: #414141 !important;
    color: #ffffff !important;
    border-color: #666666 !important;
}


/* Button-Mouse-over helleres Grau */
.fwkasse-app button:hover,
.fwkasse-app button:focus {
    background-color: #555555 !important;
    color: #ffffff !important;
}


/* Aktive Kategorie – weiterhin blau */
.fwkasse-app button.active,
.fwkasse-app button[aria-pressed="true"] {
    background-color: #1d3b7a !important;
    color: #ffffff !important;
}


/* Feuerwehrrote Kassa-Aktionen */
.fwkasse-app button.fwkasse-primary,
.fwkasse-app button.btn-primary,
.fwkasse-app .btn-danger {
    background-color: #e30613 !important;
    border-color: #e30613 !important;
    color: #ffffff !important;
}


/* Feuerwehrrote Aktionen bei Mouse-over */
.fwkasse-app button.fwkasse-primary:hover,
.fwkasse-app button.btn-primary:hover,
.fwkasse-app .btn-danger:hover {
    background-color: #ff3b45 !important;
    border-color: #ff3b45 !important;
    color: #ffffff !important;
}
/* =========================================================
   FEUERWEHR-KASSA – ARTIKEL UND KATEGORIEBUTTONS
   ========================================================= */


/* ---------------------------------------------------------
   1. Artikelkarten: weißer Hintergrund und schwarzer Text
   --------------------------------------------------------- */

.fwkasse-app #products .fwkasse-card,
.fwkasse-app .fwkasse-products .fwkasse-card {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #777777 !important;
}


/* Alle Texte innerhalb der Artikelkarten schwarz */
.fwkasse-app #products .fwkasse-card *,
.fwkasse-app .fwkasse-products .fwkasse-card * {
    color: #000000 !important;
}


/* Gedämpfte Artikeltexte ebenfalls schwarz */
.fwkasse-app #products .fwkasse-card .fwkasse-muted,
.fwkasse-app .fwkasse-products .fwkasse-card .fwkasse-muted {
    color: #000000 !important;
}


/* Artikelpreise und Artikelnamen */
.fwkasse-app #products .fwkasse-card h3,
.fwkasse-app #products .fwkasse-card h4,
.fwkasse-app #products .fwkasse-card p,
.fwkasse-app #products .fwkasse-card span,
.fwkasse-app #products .fwkasse-card strong {
    color: #000000 !important;
}


/* ---------------------------------------------------------
   2. Kategoriebuttons: Standard hellgrau
   --------------------------------------------------------- */

.fwkasse-app #categories button,
.fwkasse-app #categories .btn {
    background-color: #d3d3d3 !important;
    border: 1px solid #999999 !important;
    color: #000000 !important;
    font-weight: 700 !important;
}


/* Auch sämtliche Texte innerhalb der Kategoriebuttons */
.fwkasse-app #categories button *,
.fwkasse-app #categories .btn * {
    color: #000000 !important;
}


/* ---------------------------------------------------------
   3. Aktive Kategorie: Feuerwehrrot
   --------------------------------------------------------- */

.fwkasse-app #categories button.active,
.fwkasse-app #categories button[aria-pressed="true"],
.fwkasse-app #categories .btn.active,
.fwkasse-app #categories .btn[aria-pressed="true"] {
    background-color: #e30613 !important;
    border-color: #e30613 !important;
    color: #ffffff !important;
}


/* Text im aktiven Kategoriebutton weiß */
.fwkasse-app #categories button.active *,
.fwkasse-app #categories button[aria-pressed="true"] *,
.fwkasse-app #categories .btn.active *,
.fwkasse-app #categories .btn[aria-pressed="true"] * {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   4. Mouse-over bei nicht aktiven Kategoriebuttons
   --------------------------------------------------------- */

.fwkasse-app #categories button:not(.active):hover,
.fwkasse-app #categories button:not([aria-pressed="true"]):hover,
.fwkasse-app #categories .btn:not(.active):hover,
.fwkasse-app #categories .btn:not([aria-pressed="true"]):hover {
    background-color: #eeeeee !important;
    border-color: #999999 !important;
    color: #000000 !important;
}


/* ---------------------------------------------------------
   5. Mouse-over beim aktiven Button
   --------------------------------------------------------- */

.fwkasse-app #categories button.active:hover,
.fwkasse-app #categories button[aria-pressed="true"]:hover,
.fwkasse-app #categories .btn.active:hover,
.fwkasse-app #categories .btn[aria-pressed="true"]:hover {
    background-color: #ff3b45 !important;
    border-color: #ff3b45 !important;
    color: #ffffff !important;
}
/* =========================================================
   BEITRAGSINHALT – EINHEITLICHER DUNKELGRAUER HINTERGRUND
   ========================================================= */

/* Gesamter Joomla-Beitragsbereich */
.com-content-article,
.com-content-article__body,
.item-page,
.com-content,
.container-component {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}


/* Alle inneren Inhaltsbereiche */
.com-content-article *,
.com-content-article__body *,
.item-page * {
    background-color: transparent !important;
}


/* Beitragsbereich selbst wieder dunkelgrau setzen */
.com-content-article,
.com-content-article__body,
.item-page {
    background-color: #2b2b2b !important;
}


/* Überschrift und Unterüberschrift */
.com-content-article h1,
.com-content-article h2,
.com-content-article h3,
.com-content-article p,
.item-page h1,
.item-page h2,
.item-page h3,
.item-page p {
    background-color: transparent !important;
    color: #ffffff !important;
}
/* =========================================================
   ANMELDEFORMULAR – DUNKELGRAUER HINTERGRUND
   ========================================================= */

/* Hauptbereich des Joomla-Anmeldeformulars */
.login,
.login-form,
.com-users-login,
.com-users-login__form,
.com-users-login__options {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}


/* Formular-Container und innere Bereiche */
.login .form-group,
.login-form .form-group,
.com-users-login .form-group,
.com-users-login__form > *,
.com-users-login__options > * {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}


/* Beschriftungen */
.login label,
.login-form label,
.com-users-login label {
    color: #ffffff !important;
}


/* Eingabefelder */
.login input,
.login-form input,
.com-users-login input {
    background-color: #414141 !important;
    color: #ffffff !important;
    border: 1px solid #666666 !important;
}


/* Platzhalter */
.login input::placeholder,
.login-form input::placeholder,
.com-users-login input::placeholder {
    color: #d5d5d5 !important;
}


/* Passwort- und Benutzername-Felder bei Fokus */
.login input:focus,
.login-form input:focus,
.com-users-login input:focus {
    background-color: #414141 !important;
    color: #ffffff !important;
    border-color: #e30613 !important;
    box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.25) !important;
}


/* Bereich „Passwort vergessen?“ und „Benutzername vergessen?“ */
.login .list-group,
.login-form .list-group,
.com-users-login .list-group,
.login .list-group-item,
.login-form .list-group-item,
.com-users-login .list-group-item {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}


/* Links im Anmeldeformular */
.login a,
.login-form a,
.com-users-login a {
    color: #ff6870 !important;
}


/* Links bei Mouse-over */
.login a:hover,
.login-form a:hover,
.com-users-login a:hover {
    color: #ffffff !important;
}
/* =========================================================
   KASSA – MELDUNG UND ARTIKELBUTTONS
   ========================================================= */


/* ---------------------------------------------------------
   1. Text der Meldung „Dein Kassenstand ist ausgeglichen.“
   --------------------------------------------------------- */

#system-message-container .alert,
#system-message-container .alert *,
#system-message-container .alert-success,
#system-message-container .alert-success * {
    color: #000000 !important;
}


/* Hintergrund der Meldung dunkelgrau beibehalten */
#system-message-container .alert,
#system-message-container .alert-success {
    background-color: #2b2b2b !important;
    border-color: #555555 !important;
}


/* ---------------------------------------------------------
   2. „Hinzufügen“-Buttons auf den Artikelkarten
   --------------------------------------------------------- */

.fwkasse-app #products .fwkasse-card button,
.fwkasse-app .fwkasse-products .fwkasse-card button,
.fwkasse-app #products .fwkasse-card .btn,
.fwkasse-app .fwkasse-products .fwkasse-card .btn {
    background-color: #e30613 !important;
    border-color: #e30613 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}


/* Schrift innerhalb der Artikelbuttons ebenfalls weiß */
.fwkasse-app #products .fwkasse-card button *,
.fwkasse-app .fwkasse-products .fwkasse-card button *,
.fwkasse-app #products .fwkasse-card .btn *,
.fwkasse-app .fwkasse-products .fwkasse-card .btn * {
    color: #ffffff !important;
}


/* Mouse-over bei „Hinzufügen“ */
.fwkasse-app #products .fwkasse-card button:hover,
.fwkasse-app .fwkasse-products .fwkasse-card button:hover,
.fwkasse-app #products .fwkasse-card .btn:hover,
.fwkasse-app .fwkasse-products .fwkasse-card .btn:hover {
    background-color: #ff3b45 !important;
    border-color: #ff3b45 !important;
    color: #ffffff !important;
}
/* =========================================================
   KASSENSTAND-MELDUNG – SCHWARZE SCHRIFT
   ========================================================= */

.fwkasse-app > .alert.alert-success.mt-3.mb-0 {
    background-color: #2b2b2b !important;
    color: #000000 !important;
    border-color: #555555 !important;
}


/* Direkter Meldungstext */
.fwkasse-app > .alert.alert-success.mt-3.mb-0,
.fwkasse-app > .alert.alert-success.mt-3.mb-0 * {
    color: #000000 !important;
}
/* =========================================================
   KASSIERBEREICH – SCHWARZE SCHRIFT
   ========================================================= */


/* Gesamter Kassierbereich */
.fwkasse-cashier {
    color: #000000 !important;
}


/* Überschrift, Beschreibung und Mandantenzeile */
.fwkasse-cashier h1,
.fwkasse-cashier h2,
.fwkasse-cashier h3,
.fwkasse-cashier h4,
.fwkasse-cashier p,
.fwkasse-cashier div,
.fwkasse-cashier span,
.fwkasse-cashier label {
    color: #000000 !important;
}


/* Speziell der obere Kassa-Bereich */
.fwkasse-cashier .fwkasse-cashier-hero {
    color: #000000 !important;
}


/* Alle Texte in den Kassierkarten */
.fwkasse-cashier .fwkasse-card,
.fwkasse-cashier .fwkasse-card * {
    color: #000000 !important;
}


/* Status „Freigegeben“ weiterhin weiß auf grün */
.fwkasse-cashier .badge,
.fwkasse-cashier .badge *,
.fwkasse-cashier .alert,
.fwkasse-cashier .alert * {
    color: #ffffff !important;
}


/* Eingabefelder bzw. Code-/Kassenkennungen */
.fwkasse-cashier input,
.fwkasse-cashier textarea {
    color: #000000 !important;
}


/* Links im Kassierbereich */
.fwkasse-cashier a {
    color: #000000 !important;
}


/* Rote bzw. grüne Buttons behalten ihre helle Schrift */
.fwkasse-cashier button,
.fwkasse-cashier .btn {
    color: #ffffff !important;
}
/* =========================================================
   PROFILBEREICH – DUNKELGRAUER HINTERGRUND
   ========================================================= */


/* Mögliche Hauptcontainer des Profilbereichs */
.fwkasse-profile,
.fwkasse-profile-page,
.com-users-profile,
.profile,
.profile-edit {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}


/* Innere Profilbereiche und Karten */
.fwkasse-profile *,
.fwkasse-profile-page *,
.com-users-profile *,
.profile *,
.profile-edit * {
    border-color: #555555 !important;
}


/* Typische Karten und Formularbereiche */
.fwkasse-profile .card,
.fwkasse-profile .card-body,
.fwkasse-profile .form-control,
.fwkasse-profile-page .card,
.fwkasse-profile-page .card-body,
.com-users-profile .card,
.com-users-profile .card-body,
.profile .card,
.profile .card-body {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}


/* Eingabefelder im Profil */
.fwkasse-profile input,
.fwkasse-profile textarea,
.fwkasse-profile select,
.fwkasse-profile-page input,
.fwkasse-profile-page textarea,
.fwkasse-profile-page select,
.com-users-profile input,
.com-users-profile textarea,
.com-users-profile select,
.profile input,
.profile textarea,
.profile select {
    background-color: #414141 !important;
    color: #ffffff !important;
    border-color: #666666 !important;
}


/* Beschriftungen und Überschriften */
.fwkasse-profile h1,
.fwkasse-profile h2,
.fwkasse-profile h3,
.fwkasse-profile h4,
.fwkasse-profile label,
.fwkasse-profile-page h1,
.fwkasse-profile-page h2,
.fwkasse-profile-page h3,
.fwkasse-profile-page label,
.com-users-profile h1,
.com-users-profile h2,
.com-users-profile h3,
.com-users-profile label,
.profile h1,
.profile h2,
.profile h3,
.profile label {
    color: #ffffff !important;
}
/* =========================================
   PROFILBEREICH – dunkler Hintergrund
   ========================================= */

body.com_users.view-profile,
body.com_users.view-profile main,
body.com_users.view-profile .site-grid,
body.com_users.view-profile .container-component {
    background-color: #292929 !important;
}

/* Hauptbereich des Profils */
body.com_users.view-profile .com-users-profile.profile,
body.com_users.view-profile .com-users-profile__core,
body.com_users.view-profile fieldset#users-profile-core {
    background-color: #292929 !important;
    color: #ffffff !important;
    border-color: #292929 !important;
}

/* Profil- und Einstellungsbereiche */
body.com_users.view-profile .com-users-profile__core *,
body.com_users.view-profile .profile *,
body.com_users.view-profile fieldset *,
body.com_users.view-profile legend {
    color: #ffffff !important;
}

/* Helle Flächen innerhalb des Profilbereichs entfernen */
body.com_users.view-profile .com-users-profile__core,
body.com_users.view-profile .com-users-profile__core dl,
body.com_users.view-profile .com-users-profile__core dt,
body.com_users.view-profile .com-users-profile__core dd {
    background-color: #292929 !important;
}

/* Trennlinien im Profilbereich */
body.com_users.view-profile .com-users-profile__core,
body.com_users.view-profile fieldset {
    border-color: #444444 !important;
}
/* =========================================
   Profilbereich vollständig dunkelgrau
   ========================================= */

body.com_users.view-profile .com-users-profile.profile,
body.com_users.view-profile .com-users-profile__core,
body.com_users.view-profile .com-users-profile__params,
body.com_users.view-profile fieldset {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}

/* Alle Profilbereiche und Inhaltsflächen */
body.com_users.view-profile .com-users-profile__core *,
body.com_users.view-profile .com-users-profile__params *,
body.com_users.view-profile fieldset *,
body.com_users.view-profile dl,
body.com_users.view-profile dt,
body.com_users.view-profile dd {
    background-color: transparent !important;
}

/* Rahmen der einzelnen Profilbereiche */
body.com_users.view-profile .com-users-profile__core,
body.com_users.view-profile .com-users-profile__params,
body.com_users.view-profile fieldset {
    border-color: #444444 !important;
}

/* Überschriften und Legenden */
body.com_users.view-profile .com-users-profile__core legend,
body.com_users.view-profile .com-users-profile__params legend,
body.com_users.view-profile fieldset legend {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Profiltexte */
body.com_users.view-profile .com-users-profile__core,
body.com_users.view-profile .com-users-profile__params,
body.com_users.view-profile dt,
body.com_users.view-profile dd,
body.com_users.view-profile label {
    color: #ffffff !important;
}
/* =========================================
   Bezahlseite – dunkles Design
   ========================================= */

/* Gesamter Zahlungsbereich */
body.com_feuerwehrkasse.view-payment .fwk-payment {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}

/* Alle Zahlungskarten */
body.com_feuerwehrkasse.view-payment .fwk-payment-card {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border: 1px solid #555555 !important;
}

/* Texte innerhalb der Zahlungskarten */
body.com_feuerwehrkasse.view-payment .fwk-payment-card *,
body.com_feuerwehrkasse.view-payment .fwk-payment *,
body.com_feuerwehrkasse.view-payment .fwk-payment-card h1,
body.com_feuerwehrkasse.view-payment .fwk-payment-card h2,
body.com_feuerwehrkasse.view-payment .fwk-payment-card h3,
body.com_feuerwehrkasse.view-payment .fwk-payment-card p,
body.com_feuerwehrkasse.view-payment .fwk-payment-card div,
body.com_feuerwehrkasse.view-payment .fwk-payment-card span,
body.com_feuerwehrkasse.view-payment .fwk-payment-card strong {
    color: #ffffff !important;
}

/* Beschriftungen und Zahlungsdaten */
body.com_feuerwehrkasse.view-payment .fwk-payment-card label,
body.com_feuerwehrkasse.view-payment .fwk-payment-card dt,
body.com_feuerwehrkasse.view-payment .fwk-payment-card dd {
    color: #ffffff !important;
}

/* Status "Wartet auf Prüfung" */
body.com_feuerwehrkasse.view-payment .fwk-status.pending {
    color: #6b4f00 !important;
    background-color: #fff1b8 !important;
    border-color: #e0c35a !important;
}

/* Buttons */
body.com_feuerwehrkasse.view-payment .fwk-payment-card button,
body.com_feuerwehrkasse.view-payment .fwk-payment-card .btn {
    color: #ffffff !important;
}

/* Zurück-zur-Kasse-Button */
body.com_feuerwehrkasse.view-payment .fwk-payment-card .btn-secondary {
    background-color: #2b2b2b !important;
    color: #ff3333 !important;
    border-color: #999999 !important;
}

/* QR-Code bewusst weiß lassen,
   damit er mit Banking-Apps zuverlässig scanbar bleibt */
body.com_feuerwehrkasse.view-payment .fwk-payment-card img[src*="qr"],
body.com_feuerwehrkasse.view-payment .fwk-payment-card canvas {
    background-color: #ffffff !important;
}

/* Hinweisbox am unteren Ende */
body.com_feuerwehrkasse.view-payment .fwk-payment-card:last-child {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}
/* Text über dem persönlichen QR-Code schwarz darstellen */
body.com_feuerwehrkasse.view-dashboard .fwkasse-qr-panel p {
    color: #000000 !important;
}
/* Überschrift des QR-Code-Bereichs */
body.com_feuerwehrkasse.view-dashboard .fwkasse-qr-panel h2 {
    color: #000000 !important;
}
/* QR-Code-Anmeldebutton */
#fwk-qr-start.btn,
#fwk-qr-start.btn-outline-primary {
    background-color: #0057b8 !important;
    border-color: #0057b8 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Hover-Effekt */
#fwk-qr-start.btn:hover,
#fwk-qr-start.btn-outline-primary:hover {
    background-color: #003f88 !important;
    border-color: #003f88 !important;
    color: #ffffff !important;
}

/* Tastaturfokus */
#fwk-qr-start.btn:focus,
#fwk-qr-start.btn-outline-primary:focus {
    background-color: #0057b8 !important;
    border-color: #0057b8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.35) !important;
}
/* Texte im Feuerwehr-Kasse-Anmeldebereich weiß */
.fwk-login .text-muted,
.fwk-login p,
.fwk-login .mt-2,
.fwk-login .mb-0 {
    color: #ffffff !important;
}
/* Alle normalen Texte innerhalb des Login-Fensters */
#fwk-login-box,
#fwk-login-box p,
#fwk-login-box .text-muted {
    color: #ffffff !important;
}

/* =========================================================
   FEUERWEHR-MENÜ – Joomla mod-menu__sub
   Korrektur für das tatsächlich gerenderte Untermenü
   ========================================================= */

/* Joomla rendert das aufgeklappte Untermenü als
   ul.mod-menu__sub.show-menu. */
.container-header .container-nav .mod-menu > li > ul.mod-menu__sub,
.container-header .container-nav .mod-menu ul.mod-menu__sub.show-menu {
    background: #b80510 !important;
    background-color: #b80510 !important;
    color: #ffffff !important;
}

/* Auch die LI-Elemente selbst bekommen keinen weißen
   Cassiopeia-Hintergrund. */
.container-header .container-nav .mod-menu > li > ul.mod-menu__sub > li,
.container-header .container-nav .mod-menu ul.mod-menu__sub.show-menu > li {
    background: #b80510 !important;
    background-color: #b80510 !important;
    color: #ffffff !important;
}

/* Untermenü-Links: weiß auf dunkelrot */
.container-header .container-nav .mod-menu > li > ul.mod-menu__sub > li > a,
.container-header .container-nav .mod-menu ul.mod-menu__sub.show-menu > li > a {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Aktiver/aktueller Untermenüpunkt */
.container-header .container-nav .mod-menu ul.mod-menu__sub.show-menu > li.current > a,
.container-header .container-nav .mod-menu ul.mod-menu__sub.show-menu > li.active > a {
    background: #ff3b45 !important;
    background-color: #ff3b45 !important;
    color: #ffffff !important;
}

/* Hover/Fokus */
.container-header .container-nav .mod-menu ul.mod-menu__sub.show-menu > li > a:hover,
.container-header .container-nav .mod-menu ul.mod-menu__sub.show-menu > li > a:focus {
    background: #ff3b45 !important;
    background-color: #ff3b45 !important;
    color: #ffffff !important;
}

/* Falls Joomla den Untermenü-Button innerhalb der Sub-Liste rendert */
.container-header .container-nav .mod-menu ul.mod-menu__sub.show-menu button {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

/* =========================================================
   HEADER – „Service Portal“ nicht klickbar
   ========================================================= */

.container-header .site-description a,
.container-header .site-title a,
.container-header .brand a {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
}

/* =========================================================
   HEADER – ALTERNATIVER TITEL / BRAND-LOGO NICHT KLICKBAR
   Joomla Cassiopeia
   ========================================================= */

.container-header .navbar-brand > a,
.container-header .navbar-brand > a.brand-logo {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
}