/* ==========================================================================
   maximails-dark.css
   Dunkles Fundament fuer maximails.de: Schwarz, Weiss, Gold.
   Wird als LETZTES Stylesheet geladen und ueberschreibt 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 Flaeche hell bleibt */
    --mm-tinte-link: #6b4e00;   /* Link auf heller Flaeche */
    --mm-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Grundflaeche
   -------------------------------------------------------------------------- */

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 Fliesstext 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 Gaeste-Menue, 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;
}

/* Menuepunkte sind keine Nebensache. Sie stehen auf vollem Kontrast, der
   aktive Punkt hebt sich zusaetzlich 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-Menues */
.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-Menue 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 uebernommen. */
#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-Hintergruende 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 faerbt den Kartenkopf ueber .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 fuer 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;
}

/* Loeschen und Abbrechen bleiben als Warnung erkennbar, nur gedaempft. */
.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 fuer das Roboter-Bild auf der Startseite
   Solange die Stelle leer ist, verschwindet sie vollstaendig.
   -------------------------------------------------------------------------- */

.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
   spaeter im Dokument steht. Deshalb hier mit !important gedaempft.
   -------------------------------------------------------------------------- */

.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. Fuss
   -------------------------------------------------------------------------- */

#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 wuenscht
   -------------------------------------------------------------------------- */

@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 gehoert auf vollen Kontrast.
   Zweitens standen helle Bootstrap-Bausteine ungedeckt da. Bootstrap gibt
   Listen, Tabellen und Hinweisen einen weissen Grund. Die helle Schrift des
   dunklen Designs landete darauf und war unlesbar.
   Dieser Block steht bewusst am Ende der Datei, damit er die frueheren
   Regeln schlaegt.
   ========================================================================== */

.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 Flaechen
   als Inline-Stil mit. Inline schlaegt jede normale Regel, deshalb hier
   ausdruecklich dunkle Flaeche statt heller Schrift auf Weiss. */
[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 Weiss.

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

/* 13.1 Flaechen: 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-Eintraege, 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 Schnelluebersicht. */
.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 Bloecke, die hell bleiben wuerden, 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 gewaenne die Regel
   "#container a { color: gold }" aus Abschnitt 4 und schriebe Gold auf Weiss. */
#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 fuer Farben, die INLINE im Inhalt stehen

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

   14.1 Text-Elemente geben ihre Inline-Farbe ab. Sie erben Schrift- und
        Grundfarbe vom dunklen Layout. Das ist die staerkere Regel (1,1,1),
        damit sie 14.2 schlaegt.
   14.2 Alles andere, was eine HELLE Flaeche behaelt (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 Flaeche, die INLINE gesetzt ist, wird selbst dunkel.
   Damit steht nirgends helle Schrift auf Weiss 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 Rueckfallebene. Steht die helle Farbe in einer Kurzschrift
   zusammen mit einem Bild, laesst sich die Flaeche nicht dunkel faerben,
   ohne das Bild zu zerstoeren. 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 Flaechen 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) stuenden Listen,
   Hinweise und Tabellen dort ohne eigene Flaeche.
   -------------------------------------------------------------------------- */

#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 Flaechen 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 ueber Gold kenntlich, nicht ueber 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 Fliesstext und
   gehoert auf Weiss, 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 ausdruecklich 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) }"
      faerbt Text in Links golden. Ein Button IST ein Link, also stand Gold auf
      Gold. Buttons werden hier ausgenommen, auf der hellen Goldflaeche gehoert
      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 waechst jetzt mit dem Bildschirm.
      Kleine Bildschirme bleiben unveraendert.
   ========================================================================== */

.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 heisst helle Schrift. Nur die hellen, goldenen Flaechen
   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;
}