/* ==========================================================================
   werbemail24-dark.css
   Dunkles Fundament für werbemail24.com: Schwarz, Weiß, Gold.
   Übernommen von maximails-dark.css (Stand 23.09.2026, inkl. Nachbesserung 4 und 5).
   Änderungen dort bitte hier nachziehen.
   Wird als LETZTES Stylesheet geladen und überschreibt Bootstrap und MDB.
   Angelegt am 22.09.2026. Keine externen Quellen, keine Schrift von fremden
   Servern, nur der System-Schriftstapel.
   ========================================================================== */

:root {
    --mm-bg: #0b0d10;
    --mm-fg: #eef2ff;
    --mm-card: rgba(255, 255, 255, 0.06);
    --mm-border: rgba(255, 255, 255, 0.12);
    --mm-gold: #d6b25e;
    --mm-gold-hell: #f3d78a;

    /* Abgeleitete Werte, damit Karten, Tabellen und Felder gleich aussehen */
    --mm-bg-tief: #07090b;
    --mm-fg-leise: rgba(238, 242, 255, 0.72);
    --mm-radius: 14px;
    --mm-radius-klein: 10px;
    --mm-breite: 1140px;
    --mm-tinte: #14110a;        /* dunkle Schrift, wenn eine Fläche hell bleibt */
    --mm-tinte-link: #6b4e00;   /* Link auf heller Fläche */
    --mm-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Grundfläche
   -------------------------------------------------------------------------- */

html {
    background-color: var(--mm-bg);
}

body {
    margin: 0;
    background-color: var(--mm-bg);
    background-image: none;
    color: var(--mm-fg);
    font-family: var(--mm-schrift);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* MDB und Bootstrap setzen die Schrift auf Roboto aus einer eigenen Datei.
   Wir bleiben beim Systemstapel, damit nichts nachgeladen wird. */
body,
.navbar,
.btn,
.card,
.form-control,
input,
select,
textarea,
button {
    font-family: var(--mm-schrift);
}
/* Der Fließtext der alten Inhalte kam mit 13px aus der Datenbank. */
#container,
.container {
    max-width: var(--mm-breite);
    margin: 0 auto;
    padding: 24px 16px 64px;
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   2. Kopf mit Wortmarke
   -------------------------------------------------------------------------- */

#headerwrapper {
    width: auto;
    height: auto;
    max-width: var(--mm-breite);
    margin: 0 auto;
    padding: 0 16px;
    clear: both;
}

#headerwrapper > a,
#headerwrapper > a:hover,
#headerwrapper > a:focus {
    display: block;
    text-decoration: none;
}

#header {
    /* Das alte blaue Banner-Bild passt nicht zum dunklen Grund. */
    background-image: none;
    background-repeat: no-repeat;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 26px 0 20px;
}

.mm-wortmarke {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--mm-fg);
    line-height: 1.1;
}

.mm-wortmarke-endung {
    color: var(--mm-gold);
    font-weight: 600;
}

.mm-wortmarke-strich {
    display: block;
    width: 56px;
    height: 2px;
    margin-top: 8px;
    background: linear-gradient(90deg, var(--mm-gold), rgba(214, 178, 94, 0));
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Navigation (Mitglieder- und Gäste-Menü, beide gleich)
   -------------------------------------------------------------------------- */

.navbar,
.navbar.navbar-light,
.navbar.navbar-expand-lg {
    background-color: rgba(255, 255, 255, 0.04);
    border-top: 1px solid var(--mm-border);
    border-bottom: 1px solid var(--mm-border);
    box-shadow: none;
    padding: 0.55rem max(16px, calc((100% - var(--mm-breite)) / 2));
}

@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
    .navbar.navbar-light {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
    color: var(--mm-gold);
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Menüpunkte sind keine Nebensache. Sie stehen auf vollem Kontrast, der
   aktive Punkt hebt sich zusätzlich durch Gold ab, nicht durch Helligkeit. */
.navbar-light .navbar-nav .nav-link {
    color: var(--mm-fg) !important;
    font-weight: 500;
    padding: 0.5rem 0.85rem;
    border-radius: var(--mm-radius-klein);
    transition: color 0.18s ease, background-color 0.18s ease;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-item.active > .nav-link {
    color: var(--mm-gold-hell) !important;
    background-color: rgba(214, 178, 94, 0.14) !important;
    box-shadow: inset 0 -2px 0 0 var(--mm-gold);
    font-weight: 600;
}

/* Der Pfeil der Aufklapp-Punkte war ebenfalls zu blass. */
.navbar-light .navbar-nav .dropdown-toggle::after {
    border-top-color: var(--mm-gold);
    opacity: 1;
}

.navbar-light .navbar-toggler {
    color: var(--mm-fg);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-klein);
}

/* Helles Hamburger-Symbol, als Inline-Grafik, nichts wird nachgeladen. */
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(238, 242, 255, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Aufklapp-Menüs */
.navbar .dropdown-menu {
    background-color: #12151a;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-klein);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    padding: 6px;
    margin-top: 6px;
}

.navbar .dropdown-menu .dropdown-item {
    color: var(--mm-fg) !important;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    white-space: normal;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    color: var(--mm-gold-hell) !important;
    background-color: rgba(214, 178, 94, 0.14);
}

/* Die alten <font color="red">-Auszeichnungen im Mitglieder-Menü sollen
   nicht schreien, aber sichtbar bleiben. */
.navbar .dropdown-item font[color="red"],
.navbar .nav-link font[color="red"] {
    color: var(--mm-gold-hell) !important;
}
/* --------------------------------------------------------------------------
   4. Ueberschriften, Text, Links
   -------------------------------------------------------------------------- */

#container h1,
#container h2,
#container h3,
#container h4,
#container h5,
#container h6,
.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6 {
    color: var(--mm-fg);
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.25;
}
#container h1,
#container .display-1,
#container .display-2,
#container .display-3,
#container .display-4,
.container h1,
.container .display-1,
.container .display-2,
.container .display-3,
.container .display-4 {
    position: relative;
    padding-bottom: 14px;
}
#container h1::after,
#container .display-4::after,
.container h1::after,
.container .display-4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 2px;
    background: linear-gradient(90deg, var(--mm-gold), rgba(214, 178, 94, 0));
    border-radius: 2px;
}
#container .text-center h1::after,
#container h1.text-center::after,
#container .text-center .display-4::after,
#container .display-4.text-center::after,
.container .text-center h1::after,
.container h1.text-center::after,
.container .text-center .display-4::after,
.container .display-4.text-center::after {
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(214, 178, 94, 0), var(--mm-gold), rgba(214, 178, 94, 0));
}
/* Die Inhalte aus der Datenbank bringen feste Inline-Farben mit, zum Beispiel
   color: rgb(102,102,102) auf grauem Grund. Das ist auf Schwarz unlesbar,
   deshalb wird die Farbe hier vererbt statt übernommen. */
#container p,
#container span,
#container li,
#container td,
#container th,
#container div,
#container font,
#container strong,
#container b,
#container em,
#container i,
#container small,
#container label,
.container p,
.container span,
.container li,
.container td,
.container th,
.container div,
.container font,
.container strong,
.container b,
.container em,
.container i,
.container small,
.container label {
    color: inherit !important;
}
/* Helle Inline-Hintergründe aus dem alten Redaktions-Werkzeug abschalten.
   Karten und Tabellen weiter unten setzen ihren eigenen Grund mit !important
   und behalten ihn deshalb. */
#container p,
#container span,
#container li,
#container td,
#container th,
#container div,
#container font,
.container p,
.container span,
.container li,
.container td,
.container th,
.container div,
.container font {
    background-color: transparent !important;
}
#container p,
.container p {
    max-width: 78ch;
}
#container .text-center p,
#container p.text-center,
#container .card p,
.container .text-center p,
.container p.text-center,
.container .card p {
    max-width: none;
}
#container a,
#container a span,
#container a font,
#container a strong,
.container a,
.container a span,
.container a font,
.container a strong {
    color: var(--mm-gold) !important;
    text-decoration: none;
}
#container a:hover,
#container a:focus,
#container a:hover span,
#container a:focus span,
.container a:hover,
.container a:focus,
.container a:hover span,
.container a:focus span {
    color: var(--mm-gold-hell) !important;
    text-decoration: underline;
}
/* Buttons sind Links mit eigener Farbe, die Regel oben darf sie nicht treffen. */
#container a.btn,
#container a.btn span,
#container a.btn:hover,
#container a.btn:focus,
#container a.btn i,
.container a.btn,
.container a.btn span,
.container a.btn:hover,
.container a.btn:focus,
.container a.btn i {
    color: #14110a !important;
    text-decoration: none;
}
#container hr,
.container hr {
    border: 0;
    border-top: 1px solid var(--mm-border);
    margin: 32px 0;
}
#container img,
.container img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mm-radius-klein);
}
/* Die Verkaufsseite bringt ein festes Grau als Abschnitts-Hintergrund mit. */
#container section[style*="background-color:#555555"],
#container section[style*="background-color: #555555"],
.container section[style*="background-color:#555555"],
.container section[style*="background-color: #555555"] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-top: 1px solid var(--mm-border);
    border-bottom: 1px solid var(--mm-border);
    border-radius: var(--mm-radius);
}
/* --------------------------------------------------------------------------
   5. Karten, Tabellen, Listen: gleicher Rahmen, gleicher Radius
   -------------------------------------------------------------------------- */

#container .card,
#container .panel,
#container .well,
#container .jumbotron,
.container .card,
.container .panel,
.container .well,
.container .jumbotron {
    background-color: var(--mm-card) !important;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    color: var(--mm-fg);
    overflow: hidden;
}
#container .card-body,
.container .card-body {
    padding: 28px 26px;
}
#container .card-title,
.container .card-title {
    color: var(--mm-fg) !important;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
#container .card-text,
.container .card-text {
    color: var(--mm-fg-leise) !important;
}
#container .card-header,
.container .card-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--mm-border);
    color: var(--mm-fg);
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 18px 26px;
}
/* MDB färbt den Kartenkopf über .blue-gradient mit !important blau. */
#container .card-header.blue-gradient,
#container .blue-gradient,
.container .card-header.blue-gradient,
.container .blue-gradient {
    background: linear-gradient(90deg, rgba(214, 178, 94, 0.18), rgba(214, 178, 94, 0.04)) !important;
    box-shadow: inset 0 -1px 0 0 var(--mm-gold);
}
#container .card-link,
.container .card-link {
    font-weight: 600;
}
#container table,
.container table {
    width: 100%;
    background-color: var(--mm-card) !important;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius);
    overflow: hidden;
}
#container th,
#container td,
.container th,
.container td {
    border-bottom: 1px solid var(--mm-border);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}
#container thead th,
.container thead th {
    background-color: rgba(255, 255, 255, 0.05) !important;
    font-weight: 600;
    letter-spacing: 0.3px;
}
#container tr:last-child td,
.container tr:last-child td {
    border-bottom: 0;
}
#container ul,
#container ol,
.container ul,
.container ol {
    padding-left: 22px;
}
#container ul li::marker,
.container ul li::marker {
    color: var(--mm-gold);
}
#container blockquote,
.container blockquote {
    border-left: 2px solid var(--mm-gold);
    background-color: var(--mm-card) !important;
    border-radius: 0 var(--mm-radius-klein) var(--mm-radius-klein) 0;
    margin: 24px 0;
    padding: 14px 18px;
}
#container iframe,
.container iframe {
    border-radius: var(--mm-radius-klein);
}
/* --------------------------------------------------------------------------
   6. Formulare auf dunklem Grund
   -------------------------------------------------------------------------- */

#container .form-group,
.container .form-group {
    margin-bottom: 18px;
    text-align: left;
}
#container .form-group label,
#container label,
.container .form-group label,
.container label {
    color: var(--mm-fg-leise) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    display: inline-block;
}
#container .form-control,
#container input[type="text"],
#container input[type="email"],
#container input[type="password"],
#container input[type="number"],
#container input[type="url"],
#container input[type="search"],
#container input[type="tel"],
#container textarea,
#container select,
.container .form-control,
.container input[type="text"],
.container input[type="email"],
.container input[type="password"],
.container input[type="number"],
.container input[type="url"],
.container input[type="search"],
.container input[type="tel"],
.container textarea,
.container select {
    background-color: rgba(255, 255, 255, 0.04);
    background-image: none;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-klein);
    color: var(--mm-fg);
    font-size: 16px;
    height: auto;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
#container .form-control:hover,
#container input:hover,
#container textarea:hover,
#container select:hover,
.container .form-control:hover,
.container input:hover,
.container textarea:hover,
.container select:hover {
    border-color: rgba(255, 255, 255, 0.22);
}
#container .form-control:focus,
#container input:focus,
#container textarea:focus,
#container select:focus,
.container .form-control:focus,
.container input:focus,
.container textarea:focus,
.container select:focus {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: var(--mm-gold);
    box-shadow: 0 0 0 3px rgba(214, 178, 94, 0.25);
    color: var(--mm-fg);
    outline: none;
}
#container .form-control::placeholder,
#container input::placeholder,
#container textarea::placeholder,
.container .form-control::placeholder,
.container input::placeholder,
.container textarea::placeholder {
    color: rgba(238, 242, 255, 0.42);
    opacity: 1;
}
#container select option,
.container select option {
    background-color: #12151a;
    color: var(--mm-fg);
}

/* Der Sichtbarkeits-Ring für Tastatur-Bedienung, auf der ganzen Seite. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--mm-gold-hell);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. Buttons: Gold ist der einzige Akzent
   -------------------------------------------------------------------------- */

.btn {
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-klein);
    box-shadow: none;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 12px 22px;
    text-transform: none;
    transition: transform 0.16s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.btn:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* MDB setzt Button-Farben mit !important, deshalb hier ebenfalls. */
.btn-primary,
.btn-warning,
.btn-success,
.btn-info,
.btn-default,
.btn-warning:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
    background-color: transparent !important;
    background-image: linear-gradient(135deg, var(--mm-gold-hell), var(--mm-gold)) !important;
    border-color: rgba(214, 178, 94, 0.55) !important;
    color: #14110a !important;
}

.btn-primary:hover,
.btn-warning:hover,
.btn-success:hover,
.btn-info:hover,
.btn-default:hover {
    background-image: linear-gradient(135deg, #ffe6a8, var(--mm-gold-hell)) !important;
}

.btn-secondary,
.btn-light,
.btn-outline-primary {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-fg) !important;
}

.btn-secondary:hover,
.btn-light:hover,
.btn-outline-primary:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Löschen und Abbrechen bleiben als Warnung erkennbar, nur gedämpft. */
.btn-danger {
    background-color: rgba(190, 62, 62, 0.16) !important;
    border-color: rgba(190, 62, 62, 0.5) !important;
    color: #ffb4b4 !important;
}

.btn-danger:hover {
    background-color: rgba(190, 62, 62, 0.28) !important;
}

/* --------------------------------------------------------------------------
   8. Platz für das Roboter-Bild auf der Startseite
   Solange die Stelle leer ist, verschwindet sie vollständig.
   -------------------------------------------------------------------------- */

.mm-held {
    max-width: var(--mm-breite);
    margin: 28px auto 8px;
    padding: 0 16px;
    display: flex;
    justify-content: center;
}

.mm-held:empty {
    display: none;
}

.mm-held img {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    border-radius: var(--mm-radius);
    border: 1px solid var(--mm-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   9. Laufband
   laufband.php bringt eine eigene <style>-Angabe mit rotem Grund mit, die
   später im Dokument steht. Deshalb hier mit !important gedämpft.
   -------------------------------------------------------------------------- */

.marquee {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid var(--mm-border);
    border-bottom: 1px solid var(--mm-border);
    font-size: 15px !important;
    line-height: 44px !important;
}

.marquee span {
    color: var(--mm-fg-leise) !important;
    font-weight: 500 !important;
}

.marquee a:link,
.marquee a:visited,
.marquee a:hover {
    color: var(--mm-gold) !important;
}

/* --------------------------------------------------------------------------
   10. Fuß
   -------------------------------------------------------------------------- */

#footer {
    border-top: 1px solid var(--mm-border);
    background-color: var(--mm-bg-tief);
    margin-top: 48px;
}

#footer > div,
#footer .mm-fuss {
    text-align: center;
    padding-top: 32px !important;
    padding-bottom: 32px;
    color: var(--mm-fg-leise) !important;
    font-size: 14px;
    max-width: var(--mm-breite);
    margin: 0 auto;
}

#footer a {
    color: var(--mm-fg-leise) !important;
    text-decoration: none !important;
}

#footer a:hover,
#footer a:focus {
    color: var(--mm-gold) !important;
    text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   11. Kleine Bildschirme
   -------------------------------------------------------------------------- */

@media (max-width: 889px) {
    body {
        background-image: none;
    }

    #headerwrapper {
        width: auto;
        height: auto;
    }

    #header {
        background-image: none;
        width: auto;
        height: auto;
        padding: 20px 0 16px;
    }

    .mm-wortmarke {
        font-size: 24px;
    }
#container,
.container {
        padding: 16px 16px 48px;
    }
#container .card,
#container .card[style],
.container .card,
.container .card[style] {
        width: 100% !important;
    }
#container .card-body,
.container .card-body {
        padding: 22px 18px;
    }
}

/* --------------------------------------------------------------------------
   12. Ruhige Darstellung, wenn der Nutzer das wünscht
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .marquee span {
        animation: none !important;
        padding-left: 0 !important;
    }
}

/* ==========================================================================
   Nachbesserung 22.09.2026: Lesbarkeit
   Stephan hat zwei Fehler gemeldet. Erstens war die Hauptnavigation auf
   72 Prozent Deckkraft gesetzt und damit kaum zu sehen. Eine Navigation ist
   keine Nebensache, sie gehört auf vollen Kontrast.
   Zweitens standen helle Bootstrap-Bausteine ungedeckt da. Bootstrap gibt
   Listen, Tabellen und Hinweisen einen weißen Grund. Die helle Schrift des
   dunklen Designs landete darauf und war unlesbar.
   Dieser Block steht bewusst am Ende der Datei, damit er die früheren
   Regeln schlägt.
   ========================================================================== */

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link.dropdown-toggle {
    color: var(--mm-fg);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--mm-gold-hell);
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--mm-gold);
    background-color: rgba(214, 178, 94, 0.12);
}

/* Helle Bootstrap-Bausteine in die dunkle Welt holen. */
.list-group,
.list-group-item,
.table,
.alert,
.modal-content,
.popover,
.breadcrumb,
.pagination .page-link,
.input-group-text,
.custom-select,
.card.bg-white,
.bg-white,
.bg-light,
.jumbotron,
.well,
.panel,
.panel-body {
    background-color: var(--mm-card) !important;
    color: var(--mm-fg) !important;
    border-color: var(--mm-border) !important;
}

.table th,
.table td,
.table thead th,
.table tbody + tbody,
.table-bordered,
.table-bordered th,
.table-bordered td,
.list-group-item + .list-group-item {
    color: var(--mm-fg) !important;
    border-color: var(--mm-border) !important;
    background-color: transparent !important;
}

.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--mm-fg) !important;
}

.badge-light,
.close {
    color: var(--mm-fg) !important;
}

.tooltip-inner {
    background-color: var(--mm-bg-tief) !important;
    color: var(--mm-fg) !important;
}

/* Sicherheitsnetz: Inhalte aus der Datenbank bringen eigene helle Flächen
   als Inline-Stil mit. Inline schlägt jede normale Regel, deshalb hier
   ausdrücklich dunkle Fläche statt heller Schrift auf Weiß. */
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:white"],
[style*="background-color: white"] {
    background-color: var(--mm-card) !important;
    color: var(--mm-fg) !important;
}

/* --------------------------------------------------------------------------
   13. Helle Bootstrap- und MDB-Bausteine ins dunkle Design ziehen

   Alle Klassen hier sind am Quelltext von css/bootstrap.min.css und
   css/mdb.min.css nachgelesen, nicht geraten. Sie bringen dort einen hellen
   Grund mit (#fff, #f8f9fa, #e9ecef, #f5f5f5). Ohne diesen Abschnitt stand
   im Mitgliederbereich helle oder goldene Schrift auf Weiß.

   Wo Bootstrap oder MDB selbst !important setzen, steht es hier auch.
   -------------------------------------------------------------------------- */

/* 13.1 Flächen: gleicher Kartengrund, gleicher Rahmen, gleicher Radius */
.list-group,
.list-group-item,
.jumbotron,
.modal-content,
.popover,
.popover-body,
.popover-header,
.breadcrumb,
.pagination .page-link,
.page-link,
.input-group-text,
.custom-select,
.custom-file-label,
.img-thumbnail,
.dropdown-content,
.mdb-autocomplete-wrap,
.alert,
.progress,
.bg-white,
.bg-light,
.white,
.grey.lighten-4,
.grey.lighten-5,
.card.card-cascade.wider .card-body.card-body-cascade,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.tabs-white,
.pills-white .nav-link.active,
.pills-white .show > .nav-link {
    background-color: var(--mm-card) !important;
    background-image: none !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-fg) !important;
}

.list-group,
.jumbotron,
.modal-content,
.popover,
.breadcrumb,
.progress,
.img-thumbnail,
.dropdown-content,
.alert {
    border: 1px solid var(--mm-border) !important;
    border-radius: var(--mm-radius) !important;
    box-shadow: none;
}

.list-group {
    overflow: hidden;
}

/* 13.2 Listen-Einträge, der Kasten aus Stephans Bildschirmfoto */
.list-group-item {
    border: 0 !important;
    border-bottom: 1px solid var(--mm-border) !important;
    border-radius: 0 !important;
    margin-bottom: 0;
    padding: 14px 18px;
}

.list-group .list-group-item:last-child {
    border-bottom: 0 !important;
}

.list-group-item-action {
    transition: background-color 0.18s ease;
}

.list-group-item-action:hover,
.list-group-item-action:focus,
.list-group-item-action:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.list-group-item.active,
.list-group-item.disabled,
.list-group-item:disabled {
    background-color: rgba(214, 178, 94, 0.16) !important;
    border-color: var(--mm-border) !important;
}

.list-group-item.active {
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: inset 3px 0 0 0 var(--mm-gold);
}

/* 13.3 Tabellen. Bootstrap setzt hier selbst background-color:#fff!important */
.table,
.table td,
.table th,
.table .table,
.table .thead-light th {
    background-color: transparent !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-fg) !important;
}

.table .thead-light th,
.table thead th {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

/* 13.4 Meldungen. Die Farbvarianten bringen hellen Grund und dunkle Schrift
   mit, zum Beispiel .alert-success mit #d4edda auf #155724. */
.alert-primary,
.alert-secondary,
.alert-success,
.alert-danger,
.alert-warning,
.alert-info,
.alert-light,
.alert-dark {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-fg) !important;
}

.alert-success {
    box-shadow: inset 3px 0 0 0 #5fbf7a;
}

.alert-danger {
    box-shadow: inset 3px 0 0 0 #d47070;
}

.alert-warning,
.alert-info,
.alert-primary {
    box-shadow: inset 3px 0 0 0 var(--mm-gold);
}

/* 13.5 Abzeichen. Die nummerierten Pillen der Schnellübersicht. */
.badge-light,
.badge-secondary,
.badge-primary,
.badge-info {
    background-color: var(--mm-gold) !important;
    color: var(--mm-tinte) !important;
    font-weight: 700;
}

.badge-success,
.badge-warning,
.badge-danger,
.badge-dark {
    color: #ffffff !important;
}

/* 13.6 Blöcke, die hell bleiben würden, weil sie eine eigene Farbe setzen */
.btn-white,
.btn-light,
.btn-outline-light,
.show > .btn-outline-light.dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-fg) !important;
}

.btn-white:hover,
.btn-light:hover,
.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.close,
.close:hover,
.close:focus {
    color: var(--mm-fg) !important;
    text-shadow: none !important;
    opacity: 0.8;
}

mark,
.mark {
    background-color: rgba(214, 178, 94, 0.22) !important;
    color: var(--mm-fg) !important;
    border-radius: 4px;
    padding: 0 4px;
}

.progress {
    height: 12px;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--mm-gold) !important;
    color: var(--mm-tinte) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--mm-border) !important;
    color: var(--mm-fg) !important;
}

.modal-body,
.modal-dialog.cascading-modal .modal-body,
.modal-dialog.cascading-modal .modal-footer {
    color: var(--mm-fg) !important;
}

.modal-backdrop.show {
    opacity: 0.72;
}

.dropdown-content li,
.dropdown-content li > a,
.dropdown-content li > span {
    color: var(--mm-fg) !important;
    background-color: transparent !important;
}

.dropdown-content li:hover {
    background-color: rgba(214, 178, 94, 0.14) !important;
}

/* Ankreuzfelder von Bootstrap, im Profil des Mitgliederbereichs im Einsatz */
.custom-control-label::before {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--mm-border) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--mm-gold) !important;
    border-color: var(--mm-gold) !important;
}

.custom-control-input ~ .custom-control-label,
.custom-control-label {
    color: var(--mm-fg) !important;
}

.custom-select,
.custom-file-label,
.input-group-text {
    border-radius: var(--mm-radius-klein) !important;
}

.form-control[readonly],
.form-control:disabled,
.custom-select:disabled {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--mm-fg-leise) !important;
}

/* 13.7 Diese Bausteine sind Links. Ohne die Id-Fassung gewänne die Regel
   "#container a { color: gold }" aus Abschnitt 4 und schriebe Gold auf Weiß. */
#container .list-group-item,
#container .list-group-item-action,
#container .list-group-item:hover,
#container .list-group-item:focus,
#container .page-link,
#container .breadcrumb a,
#container .alert a,
#container .table a,
#container .dropdown-content li > a,
.container .list-group-item,
.container .list-group-item-action,
.container .list-group-item:hover,
.container .list-group-item:focus,
.container .page-link,
.container .breadcrumb a,
.container .alert a,
.container .table a,
.container .dropdown-content li > a {
    color: var(--mm-fg) !important;
    text-decoration: none;
}

#container .list-group-item strong,
#container .list-group-item span,
#container .list-group-item b,
#container .alert a strong,
.container .list-group-item strong,
.container .list-group-item span,
.container .list-group-item b,
.container .alert a strong {
    color: inherit !important;
}

#container .list-group-item .badge,
#container .list-group-item .badge-primary,
#container .list-group-item .badge-pill,
.container .list-group-item .badge,
.container .list-group-item .badge-primary,
.container .list-group-item .badge-pill {
    color: var(--mm-tinte) !important;
    background-color: var(--mm-gold) !important;
    margin-right: 8px;
}

#container .list-group-item.active,
.container .list-group-item.active {
    color: var(--mm-gold-hell) !important;
}

#container a.list-group-item:hover,
#container a.list-group-item:focus,
.container a.list-group-item:hover,
.container a.list-group-item:focus {
    color: var(--mm-gold-hell) !important;
}

/* --------------------------------------------------------------------------
   14. Sicherheitsnetz für Farben, die INLINE im Inhalt stehen

   Der Seiteninhalt kommt teils aus der Datenbank und bringt eigene Stile mit.
   Zwei Fälle, zwei Antworten:

   14.1 Text-Elemente geben ihre Inline-Farbe ab. Sie erben Schrift- und
        Grundfarbe vom dunklen Layout. Das ist die stärkere Regel (1,1,1),
        damit sie 14.2 schlägt.
   14.2 Alles andere, was eine HELLE Fläche behält (ein Abschnitt, eine
        Tabelle, ein Link mit eigenem Grund, ein altes bgcolor), bekommt
        DUNKLE Schrift. Lieber eine Stelle zu viel absichern.
   -------------------------------------------------------------------------- */

#container p[style]:not([class]),
#container span[style]:not([class]),
#container div[style]:not([class]),
#container td[style]:not([class]),
#container th[style]:not([class]),
#container tr[style]:not([class]),
#container li[style]:not([class]),
#container font[style]:not([class]),
#container strong[style]:not([class]),
#container b[style]:not([class]),
#container em[style]:not([class]),
#container i[style]:not([class]),
#container small[style]:not([class]),
#container label[style]:not([class]),
#container center[style]:not([class]),
.container p[style]:not([class]),
.container span[style]:not([class]),
.container div[style]:not([class]),
.container td[style]:not([class]),
.container th[style]:not([class]),
.container tr[style]:not([class]),
.container li[style]:not([class]),
.container font[style]:not([class]),
.container strong[style]:not([class]),
.container b[style]:not([class]),
.container em[style]:not([class]),
.container i[style]:not([class]),
.container small[style]:not([class]),
.container label[style]:not([class]),
.container center[style]:not([class]) {
    background-color: transparent !important;
    color: inherit !important;
}

/* 14.2 Eine helle Fläche, die INLINE gesetzt ist, wird selbst dunkel.
   Damit steht nirgends helle Schrift auf Weiß und das Layout bleibt aus
   einem Guss. Ausgenommen sind die Text-Elemente aus Abschnitt 4, deren
   Grund ohnehin schon auf transparent steht. */
#container [bgcolor]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background-color:#f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background-color: #f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background-color:#e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background-color: #e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background-color:#d" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background-color: #d" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background-color:white" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background-color: white" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background-color:rgb(2" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background-color: rgb(2" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background:#f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background: #f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background:#e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background: #e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background:white" i]:not(p):not(span):not(li):not(td):not(th):not(font),
#container [style*="background: white" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [bgcolor]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background-color:#f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background-color: #f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background-color:#e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background-color: #e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background-color:#d" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background-color: #d" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background-color:white" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background-color: white" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background-color:rgb(2" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background-color: rgb(2" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background:#f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background: #f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background:#e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background: #e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background:white" i]:not(p):not(span):not(li):not(td):not(th):not(font),
.container [style*="background: white" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[bgcolor]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background-color:#f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background-color: #f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background-color:#e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background-color: #e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background-color:#d" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background-color: #d" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background-color:white" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background-color: white" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background-color:rgb(2" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background-color: rgb(2" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background:#f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background: #f" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background:#e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background: #e" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background:white" i]:not(p):not(span):not(li):not(td):not(th):not(font),
[style*="background: white" i]:not(p):not(span):not(li):not(td):not(th):not(font) {
    background-color: var(--mm-card) !important;
    background-image: none !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-fg) !important;
    border-radius: var(--mm-radius-klein);
}

/* 14.3 Letzte Rückfallebene. Steht die helle Farbe in einer Kurzschrift
   zusammen mit einem Bild, lässt sich die Fläche nicht dunkel färben,
   ohne das Bild zu zerstören. Sie bleibt hell und bekommt deshalb DUNKLE
   Schrift, nicht helle. */
#container [style*="url(" i][style*="#f" i],
#container [style*="url(" i][style*="white" i],
.container [style*="url(" i][style*="#f" i],
.container [style*="url(" i][style*="white" i] {
    color: var(--mm-tinte) !important;
}

#container [style*="url(" i][style*="#f" i] a,
#container [style*="url(" i][style*="white" i] a,
.container [style*="url(" i][style*="#f" i] a,
.container [style*="url(" i][style*="white" i] a {
    color: var(--mm-tinte-link) !important;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   15. Dieselben Flächen im Inhalt durchsetzen

   Abschnitt 4 zwingt jedes div innerhalb des Inhalts auf durchsichtigen
   Grund (1,0,1). Ohne die Fassung mit Klasse (1,1,0) stünden Listen,
   Hinweise und Tabellen dort ohne eigene Fläche.
   -------------------------------------------------------------------------- */

#container .list-group,
#container .jumbotron,
#container .alert,
#container .modal-content,
#container .popover,
#container .breadcrumb,
#container .progress,
#container .input-group-text,
#container .custom-select,
#container .custom-file-label,
#container .img-thumbnail,
#container .dropdown-content,
#container .bg-white,
#container .bg-light,
#container .well,
#container .panel,
#container .panel-body,
#container .card.bg-white,
#container .pagination .page-link,
#container .nav-tabs .nav-link.active,
.container .list-group,
.container .jumbotron,
.container .alert,
.container .modal-content,
.container .popover,
.container .breadcrumb,
.container .progress,
.container .input-group-text,
.container .custom-select,
.container .custom-file-label,
.container .img-thumbnail,
.container .dropdown-content,
.container .bg-white,
.container .bg-light,
.container .well,
.container .panel,
.container .panel-body,
.container .card.bg-white,
.container .pagination .page-link,
.container .nav-tabs .nav-link.active {
    background-color: var(--mm-card) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-fg) !important;
}

/* Links auf diesen Flächen bleiben als Links erkennbar, in Gold. */
#container .table a,
#container .alert a,
#container .jumbotron a,
#container .breadcrumb a,
.container .table a,
.container .alert a,
.container .jumbotron a,
.container .breadcrumb a {
    color: var(--mm-gold) !important;
    text-decoration: none;
}

#container .table a:hover,
#container .alert a:hover,
#container .jumbotron a:hover,
.container .table a:hover,
.container .alert a:hover,
.container .jumbotron a:hover {
    color: var(--mm-gold-hell) !important;
    text-decoration: underline;
}

/* Die aktive Seitenzahl wird über Gold kenntlich, nicht über Blau. */
.page-item.active .page-link,
#container .page-item.active .page-link,
.container .page-item.active .page-link {
    background-color: rgba(214, 178, 94, 0.18) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-gold-hell) !important;
    font-weight: 700;
}

/* Ein Listen-Eintrag ist selbst der Link. Sein Text ist Fließtext und
   gehört auf Weiß, nicht auf Gold, auch wenn er in einem Jumbotron steht. */
#container .jumbotron a.list-group-item,
#container .list-group a.list-group-item,
#container .jumbotron .list-group-item,
.container .jumbotron a.list-group-item,
.container .list-group a.list-group-item,
.container .jumbotron .list-group-item {
    color: var(--mm-fg) !important;
}

#container .jumbotron a.list-group-item:hover,
#container .list-group a.list-group-item:hover,
.container .jumbotron a.list-group-item:hover,
.container .list-group a.list-group-item:hover {
    color: var(--mm-gold-hell) !important;
}

#container .jumbotron .list-group-item.active,
#container .list-group .list-group-item.active,
.container .jumbotron .list-group-item.active,
.container .list-group .list-group-item.active {
    color: var(--mm-gold-hell) !important;
}

/* Alt-Klassen aus den Mitglieder-Modulen. In keiner geladenen Stildatei
   definiert, sie erben heute also nur. Hier ausdrücklich gesetzt, damit
   sie nicht eines Tages von einer fremden Regel hell auf hell landen. */
.formlabel,
.formlabelbold,
.membertdbold,
.footer-text,
#container .formlabel,
#container .formlabelbold,
#container .membertdbold,
#container .footer-text,
.container .formlabel,
.container .formlabelbold,
.container .membertdbold,
.container .footer-text {
    color: var(--mm-fg) !important;
    background-color: transparent !important;
}

.formlabelbold,
.membertdbold,
#container .formlabelbold,
#container .membertdbold,
.container .formlabelbold,
.container .membertdbold {
    font-weight: 600;
}

/* ==========================================================================
   Nachbesserung 3, 22.09.2026
   A) Button-Schrift. Die Regel ".container a strong { color: var(--mm-gold) }"
      färbt Text in Links golden. Ein Button IST ein Link, also stand Gold auf
      Gold. Buttons werden hier ausgenommen, auf der hellen Goldfläche gehört
      dunkler Text. Dieser Block MUSS am Ende der Datei bleiben.
   B) Seitenbreite. Auf breiten Bildschirmen blieb der Inhalt bei 1140px
      stehen, der Rest war leer. Die Breite wächst jetzt mit dem Bildschirm.
      Kleine Bildschirme bleiben unverändert.
   ========================================================================== */

.btn,
.btn span,
.btn strong,
.btn b,
.btn em,
.btn i,
.btn font,
#container a.btn,
#container a.btn span,
#container a.btn strong,
#container a.btn font,
#container a.btn b,
.container a.btn,
.container a.btn span,
.container a.btn strong,
.container a.btn font,
.container a.btn b,
.container a.btn:hover strong,
#container a.btn:hover strong,
.btn:hover,
.btn:hover span,
.btn:hover strong,
.btn:focus,
.btn:focus span,
.btn:focus strong {
    color: #14110a !important;
    text-shadow: none !important;
}

/* Dunkle Buttons behalten helle Schrift. */
.btn-outline-light,
.btn-outline-light span,
.btn-outline-light strong,
.btn-link,
.btn-link span,
.btn-link strong {
    color: var(--mm-fg) !important;
}

@media (min-width: 1400px) {
    :root { --mm-breite: 1320px; }
    .container,
    #container { max-width: 1320px !important; }
}

@media (min-width: 1700px) {
    :root { --mm-breite: 1520px; }
    .container,
    #container { max-width: 1520px !important; }
}

/* ==========================================================================
   Korrektur 22.09.2026, eigener Fehler.
   Die Regel weiter oben setzt ".btn { color: #14110a }", damit auf dem
   goldenen Button dunkle Schrift steht. Sie trifft aber JEDEN Button, also
   auch die dunklen Nebenbuttons wie "Passwort erzeugen". Dort stand dann
   dunkle Schrift auf dunklem Grund.
   Dunkler Button heißt helle Schrift. Nur die hellen, goldenen Flächen
   bekommen dunkle Schrift, und die sind oben einzeln benannt.
   ========================================================================== */

.btn-secondary,
.btn-secondary span,
.btn-secondary strong,
.btn-light,
.btn-light span,
.btn-outline-primary,
.btn-outline-primary span,
.btn-outline-secondary,
.btn-outline-secondary span,
.btn-outline-light,
.btn-outline-light span,
.btn-link,
.btn-link span,
.btn-dark,
.btn-dark span,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-light:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-link:hover {
    color: var(--mm-fg) !important;
    text-shadow: none !important;
}

/* ==========================================================================
   Nachbesserung 4, 23.09.2026
   Der Block "Nachbesserung 3" färbt JEDEN Button-Text dunkel (#14110a),
   auch .btn-danger. Auf dem gedämpften Rot aus Abschnitt 7 stand dadurch
   dunkle Schrift auf dunklem Rot, praktisch unsichtbar (Löschen-Button).
   .btn-danger bekommt hier wie die anderen dunklen Buttons wieder helle
   Schrift. Außerdem liefert MDB für .btn-sm eine sehr kleine Schrift,
   kaum lesbar in Tabellen. Mindestgröße 15px für jeden Button, egal
   welche Variante.
   ========================================================================== */

.btn-danger,
.btn-danger span,
.btn-danger strong,
.btn-danger b,
.btn-danger font,
#container a.btn-danger,
#container a.btn-danger span,
#container a.btn-danger strong,
.container a.btn-danger,
.container a.btn-danger span,
.container a.btn-danger strong,
.btn-danger:hover,
.btn-danger:hover span,
.btn-danger:hover strong {
    color: #ffd6d6 !important;
    text-shadow: none !important;
}

.btn,
.btn-sm,
.btn.btn-sm {
    font-size: 15px !important;
}

/* ==========================================================================
   Nachbesserung 5, 23.09.2026
   backdrop-filter an der Navbar erzeugt einen eigenen Stapelkontext. Das
   aufgeklappte Menü war darin eingesperrt, und das später folgende Laufband
   (transform-Animation) sowie Inhaltskarten lagen darüber: Menü sichtbar,
   aber jeder Klick landete auf dem Laufband. Navbar deshalb ausdrücklich
   über den Rest legen.
   ========================================================================== */
.navbar,
.navbar.navbar-light,
.navbar.navbar-expand-lg {
    position: relative;
    z-index: 1030;
}
.navbar .dropdown-menu {
    z-index: 1031;
}
.marquee {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Mobile Tabellen, 23.09.2026
   Fest breite Inhaltstabellen (Vorlagen, Gesendet, Senden, Credits, Banner,
   FAQ) liefen auf dem Handy seitlich ueber den Rand. Die Seite selbst bleibt
   fest, Tabellen scrollen nur noch in ihrem eigenen Behaelter.
   ========================================================================== */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    #container,
    .container,
    .container-fluid {
        overflow-x: auto;
        max-width: 100%;
    }
    table {
        max-width: 100%;
    }
    table[width] {
        width: 100% !important;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}