/* ================================================================
   MATRIXARENA v19.7 – einheitliche Menübreite nach Elo-Rangliste

   Referenz ist ausdrücklich die sichtbare Breite der Elo-Tabelle.
   Die Bootstrap-Rangliste besitzt einen Container mit 1,5rem Gutter.
   Deshalb werden für alle Menüseiten die sichtbaren Innenbreiten des
   Bootstrap-Containers übernommen.
   ================================================================ */

/*
 * Jeder oberste Seitenbereich wird zentriert und erhält dieselbe
 * sichtbare Breite wie der Inhalt der Elo-Rangliste. Die Breite bleibt
 * immer kleiner als der verfügbare Platz und erzeugt daher auch neben
 * der festen Sidebar keinen horizontalen Überlauf.
 */
.content > * {
    box-sizing: border-box;
    width: calc(100% - 1.5rem);
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/*
 * Die Elo-Rangliste selbst nutzt einen Bootstrap-Container. Dessen
 * seitlicher Gutter wird hier entfernt, weil die gleiche Einrückung
 * bereits über die gemeinsame sichtbare Breite abgebildet wird.
 * Dadurch bleibt die Tabelle exakt so breit wie vorher.
 */
.content > :is(
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-fluid
) {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Sichtbare Bootstrap-Containerbreite: 540px minus 24px Gutter. */
@media (min-width: 576px) {
    .content > * {
        max-width: 516px !important;
    }
}

/* Sichtbare Bootstrap-Containerbreite: 720px minus 24px Gutter. */
@media (min-width: 768px) {
    .content > * {
        max-width: 696px !important;
    }
}

/* Sichtbare Bootstrap-Containerbreite: 960px minus 24px Gutter. */
@media (min-width: 992px) {
    .content > * {
        max-width: 936px !important;
    }
}

/* Sichtbare Bootstrap-Containerbreite: 1140px minus 24px Gutter. */
@media (min-width: 1200px) {
    .content > * {
        max-width: 1116px !important;
    }
}

/* Sichtbare Bootstrap-Containerbreite: 1320px minus 24px Gutter. */
@media (min-width: 1400px) {
    .content > * {
        max-width: 1296px !important;
    }
}

/*
 * Einzelne ältere Seiten besitzen innerhalb ihres Seitenbereichs noch
 * eine feste Kartenbegrenzung. Sie dürfen den gemeinsamen Rahmen füllen.
 */
.content .season-registration-card {
    width: 100% !important;
    max-width: none !important;
}

.content .table-responsive,
.content table.table {
    width: 100%;
}

@media (max-width: 575.98px) {
    .content > * {
        min-width: 0;
    }
}


/* ================================================================
   Ausnahme: Vollbild-Ueberlagerungen
   ================================================================
   Die Regel `.content > *` oben gilt fuer Seitenbereiche - fuer
   Abschnitte also, die im Textfluss stehen und dieselbe sichtbare
   Breite haben sollen wie die Rangliste. Ein Popup ist kein solcher
   Abschnitt: es haengt mit `position: fixed; inset: 0` fest im
   Bildschirm und soll ihn ganz ausfuellen.

   Trotzdem traf die Regel es, weil es im Markup direkt unter
   `.content` steht. Die Ueberlagerung bekam damit Containerbreite
   (auf grossen Schirmen 1140px statt der vollen Breite), und der
   Dialog darin war breiter als sein eigener Rahmen. Sein `margin:
   auto` hatte dadurch keinen Platz mehr zu verteilen und fiel auf
   null - der Dialog stand links an der Kante statt in der Mitte.
   ================================================================ */
/* Nicht nur die drei Namen von damals: jede Ueberlagerung dieser Art
   heisst nach demselben Muster - "...-popup", "...-modal", "...-pick".
   Die Musterzeilen fangen deshalb auch die, die spaeter dazukommen.
   Sonst faellt derselbe Fehler bei jedem neuen Popup neu auf, und
   niemand weiss mehr, warum ein Dialog links klebt. */
.content > .map-popup,
.content > .vx-modal-backdrop,
.content > .modal,
.content > [class*="-popup"],
.content > [class*="-modal"],
.content > [class*="-pick"] {
    width: auto !important;
    /* Auch die Deckelung muss weg. Die Breitenregel oben setzt sie in
       jeder Bildschirmstufe neu (`max-width: 1296px !important` ab
       1400px), und ohne diese Zeile blieb die Ueberlagerung genau so
       breit - nur eben ohne die auto-Raender, die sie vorher wenigstens
       in die Mitte geschoben hatten. Sie klebte dann links. */
    max-width: none !important;
    margin: 0 !important;
}