/* ====================================================================
   VLYX MailArchiv — eigene Stile
   Bootstrap 5.3 kommt per CDN, hier steht nur, was darueber hinausgeht.
   Vanilla CSS, kein Praeprozessor, kein Build (siehe CLAUDE.md).

   Der Aufbau (Seitenleiste, Schiene, Reiterleiste, Blaetter, Karten) kommt
   aus dem Umbau fuer die Support-Fassung von Telematik Partner. Die Marke
   nicht: Farben und Schrift sind die von VLYX, deshalb `--ma-marke` und
   keine Kundenfarbe.

   `--ma-leistenfarbe` bleibt in beiden Farbschemata dunkel. Links auf hellem Grund
   nehmen `--ma-link`, Text auf der Marke `--ma-marke-text`.
   ==================================================================== */

:root,
[data-bs-theme="light"] {
    --ma-marke:      #0b5ed7;
    --ma-marke-text: #ffffff;
    --ma-marke-hell: #8fbcff;
    --ma-marke-tief: #0a4fb6;
    --ma-marke-mitte: #0a58ca;
    --ma-leistenfarbe: #1f2d3d;

    --ma-grund:     #f6f7f9;
    --ma-grund-2:   #eceff3;
    --ma-flaeche:   #ffffff;
    --ma-rahmen:    #dee2e6;
    --ma-text:      #1c2733;
    --ma-gedaempft: #5c6773;
    --ma-dunkel:    #1f2d3d;
    --ma-link:      #0a58ca;
    --ma-link-hell: #084298;
    --ma-fokus:     #0a58ca;

    --ma-akzent-bg: #e2ecff;
    --ma-akzent-fg: #0a3d8f;
    --ma-warn-bg:   #fff1c9;
    --ma-warn-fg:   #664d03;
    --ma-warn-rand: #f0d98c;
    --ma-rot-bg:    #fbe0e0;
    --ma-rot-fg:    #8a1f2b;
    --ma-rot-rand:  #efb6bc;
    --ma-gruen-bg:  #dcefdc;
    --ma-gruen-fg:  #1d5a33;
    --ma-info-bg:   #dceef2;
    --ma-info-fg:   #17525f;
    --ma-info-rand: #a9d4dd;
    --ma-grau-bg:   #e9ecef;
    --ma-grau-fg:   #434c55;
    --ma-grau-rand: #d3d8de;
    --ma-code-grund: #1f2d3d;

    --ma-schatten: 0 1px 2px rgba(31, 45, 61, .05), 0 12px 28px -20px rgba(31, 45, 61, .35);

    --bs-body-bg:             var(--ma-grund);
    --bs-body-color:          var(--ma-text);
    --bs-body-color-rgb:      28, 39, 51;
    --bs-secondary-color:     var(--ma-gedaempft);
    --bs-tertiary-bg:         var(--ma-grund-2);
    --bs-border-color:        var(--ma-rahmen);
    --bs-link-color:          var(--ma-link);
    --bs-link-color-rgb:      10, 88, 202;
    --bs-link-hover-color:    var(--ma-link-hell);
    --bs-link-hover-color-rgb: 8, 66, 152;
    --bs-code-color:          #6b3f00;
}

[data-bs-theme="dark"] {
    --ma-marke:      #6ea8fe;
    --ma-marke-text: #0b1624;
    --ma-marke-tief: #8fbcff;
    --ma-marke-mitte: #a9caff;

    --ma-grund:     #10161d;
    --ma-grund-2:   #1a2430;
    --ma-flaeche:   #161f29;
    --ma-rahmen:    #2c3a4a;
    --ma-text:      #e6ebf2;
    --ma-gedaempft: #a6b1bf;
    --ma-dunkel:    #e6ebf2;
    --ma-link:      #8fbcff;
    --ma-link-hell: #b4d2ff;
    --ma-fokus:     #8fbcff;

    --ma-akzent-bg: #16305a;
    --ma-akzent-fg: #bcd4ff;
    --ma-warn-bg:   #3a2f0b;
    --ma-warn-fg:   #f4d774;
    --ma-warn-rand: #5e4c12;
    --ma-rot-bg:    #431c21;
    --ma-rot-fg:    #f6b3ba;
    --ma-rot-rand:  #6b2b33;
    --ma-gruen-bg:  #17382a;
    --ma-gruen-fg:  #a4e0b8;
    --ma-info-bg:   #14343c;
    --ma-info-fg:   #a5dfeb;
    --ma-info-rand: #24505b;
    --ma-grau-bg:   #263240;
    --ma-grau-fg:   #c8d0da;
    --ma-grau-rand: #384656;
    --ma-code-grund: #0b1016;

    --ma-schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -20px rgba(0, 0, 0, .7);

    --bs-body-bg:             var(--ma-grund);
    --bs-body-color:          var(--ma-text);
    --bs-body-color-rgb:      230, 235, 242;
    --bs-secondary-color:     var(--ma-gedaempft);
    --bs-tertiary-bg:         var(--ma-grund-2);
    --bs-border-color:        var(--ma-rahmen);
    --bs-link-color:          var(--ma-link);
    --bs-link-color-rgb:      143, 188, 255;
    --bs-link-hover-color:    var(--ma-link-hell);
    --bs-link-hover-color-rgb: 180, 210, 255;
    --bs-code-color:          #f2c879;
}

:root {
    --ma-radius:       14px;
    --ma-radius-klein: 10px;
    --ma-leiste:       264px;
    --ma-schiene:      92px;
    --ma-tabbar:       64px;

    --ma-schrift: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    --ma-titel:   var(--ma-schrift);

    --bs-body-font-family: var(--ma-schrift);
    --bs-body-font-size:   1rem;
    --bs-border-radius:    var(--ma-radius-klein);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--ma-radius);
    --bs-primary:          #0b5ed7;
    --bs-primary-rgb:      11, 94, 215;
}

html {
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
}

body.ma-body {
    min-height: 100dvh;
    background: var(--ma-grund);
    color: var(--ma-text);
    font-feature-settings: "tnum" 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3, .h4 {
    text-wrap: balance;
}

h1, .h1, .ma-seitenkopf h1 {
    font-family: var(--ma-titel);
    font-weight: 700;
    font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--ma-dunkel);
}

/* Die alten Ueberschriften der Ansichten tragen `h4` auf einem h1. */
h1.h4 {
    font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.6rem);
}

h2.h5, h2.h4 {
    font-family: var(--ma-titel);
    font-weight: 600;
    font-size: 1.45rem;
    letter-spacing: .015em;
    text-transform: uppercase;
    color: var(--ma-dunkel);
}

:focus-visible {
    outline: 3px solid var(--ma-fokus);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: var(--ma-marke);
    color: var(--ma-marke-text);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---- Bootstrap auf die Marke ziehen ---- */

.btn {
    --bs-btn-font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.btn-sm {
    min-height: 34px;
}

.btn-primary {
    --bs-btn-color: var(--ma-marke-text);
    --bs-btn-bg: var(--ma-marke);
    --bs-btn-border-color: var(--ma-marke);
    --bs-btn-hover-color: var(--ma-marke-text);
    --bs-btn-hover-bg: var(--ma-marke-mitte);
    --bs-btn-hover-border-color: var(--ma-marke-mitte);
    --bs-btn-active-color: var(--ma-marke-text);
    --bs-btn-active-bg: var(--ma-marke-tief);
    --bs-btn-active-border-color: var(--ma-marke-tief);
    --bs-btn-disabled-color: var(--ma-marke-text);
    --bs-btn-disabled-bg: var(--ma-marke);
    --bs-btn-disabled-border-color: var(--ma-marke);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ma-text);
    --bs-btn-border-color: var(--ma-rahmen);
    --bs-btn-hover-color: var(--ma-text);
    --bs-btn-hover-bg: var(--ma-grund-2);
    --bs-btn-hover-border-color: var(--ma-rahmen);
    --bs-btn-active-color: var(--ma-text);
    --bs-btn-active-bg: var(--ma-grund-2);
    --bs-btn-active-border-color: var(--ma-rahmen);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ma-leistenfarbe);
    --bs-btn-border-color: var(--ma-leistenfarbe);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2d4156;
    --bs-btn-hover-border-color: #2d4156;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2d4156;
    --bs-btn-active-border-color: #2d4156;
}

[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-color: #1f2d3d;
    --bs-btn-bg: #e6ebf2;
    --bs-btn-border-color: #e6ebf2;
    --bs-btn-hover-color: #1f2d3d;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-active-color: #1f2d3d;
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #ffffff;
}

.btn-link {
    --bs-btn-color: var(--ma-link);
    --bs-btn-hover-color: var(--ma-link-hell);
    --bs-btn-active-color: var(--ma-link-hell);
}

.form-control,
.form-select {
    min-height: 44px;
    background-color: var(--ma-flaeche);
    border-color: var(--ma-rahmen);
    color: var(--ma-text);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #9aa200;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .38);
    background-color: var(--ma-flaeche);
    color: var(--ma-text);
}

.form-check-input:checked {
    background-color: #5c6100;
    border-color: #5c6100;
}

.card {
    --bs-card-bg: var(--ma-flaeche);
    --bs-card-border-color: var(--ma-rahmen);
    --bs-card-border-radius: var(--ma-radius);
    --bs-card-inner-border-radius: calc(var(--ma-radius) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: .85rem;
    box-shadow: var(--ma-schatten);
}

.card-header {
    font-family: var(--ma-titel);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ma-dunkel);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ma-text);
    --bs-table-hover-bg: var(--ma-grund-2);
    --bs-table-hover-color: var(--ma-text);
    --bs-table-striped-bg: var(--ma-grund);
    --bs-table-border-color: var(--ma-rahmen);
}

.table > thead > tr > th {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ma-gedaempft);
    white-space: nowrap;
}

.table-responsive {
    border-radius: var(--ma-radius);
}

.alert {
    --bs-alert-border-radius: var(--ma-radius-klein);
}

.alert-warning {
    --bs-alert-bg: var(--ma-warn-bg);
    --bs-alert-color: var(--ma-warn-fg);
    --bs-alert-border-color: var(--ma-warn-rand);
}

.alert-danger {
    --bs-alert-bg: var(--ma-rot-bg);
    --bs-alert-color: var(--ma-rot-fg);
    --bs-alert-border-color: var(--ma-rot-rand);
}

.alert-info {
    --bs-alert-bg: var(--ma-info-bg);
    --bs-alert-color: var(--ma-info-fg);
    --bs-alert-border-color: var(--ma-info-rand);
}

.alert-success {
    --bs-alert-bg: var(--ma-gruen-bg);
    --bs-alert-color: var(--ma-gruen-fg);
    --bs-alert-border-color: transparent;
}

.alert-secondary {
    --bs-alert-bg: var(--ma-grau-bg);
    --bs-alert-color: var(--ma-grau-fg);
    --bs-alert-border-color: var(--ma-grau-rand);
}

.pagination {
    --bs-pagination-color: var(--ma-text);
    --bs-pagination-bg: var(--ma-flaeche);
    --bs-pagination-border-color: var(--ma-rahmen);
    --bs-pagination-hover-color: var(--ma-text);
    --bs-pagination-hover-bg: var(--ma-grund-2);
    --bs-pagination-hover-border-color: var(--ma-rahmen);
    --bs-pagination-focus-color: var(--ma-text);
    --bs-pagination-focus-bg: var(--ma-grund-2);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .38);
    --bs-pagination-active-color: var(--ma-marke-text);
    --bs-pagination-active-bg: var(--ma-marke);
    --bs-pagination-active-border-color: var(--ma-marke);
    --bs-pagination-disabled-bg: var(--ma-grund);
    flex-wrap: wrap;
}

.text-success {
    color: var(--ma-gruen-fg) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--ma-text);
    --bs-btn-border-color: #9aa200;
    --bs-btn-hover-color: var(--ma-marke-text);
    --bs-btn-hover-bg: var(--ma-marke);
    --bs-btn-hover-border-color: var(--ma-marke);
    --bs-btn-active-color: var(--ma-marke-text);
    --bs-btn-active-bg: var(--ma-marke);
    --bs-btn-active-border-color: var(--ma-marke);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
}

.card > .card-body > .table > * > tr > :first-child {
    padding-left: 1rem;
}

.card > .card-body > .table > * > tr > :last-child {
    padding-right: 1rem;
}

.ma-stand th {
    overflow-wrap: anywhere;
}

.ma-kartenlink {
    font-family: var(--ma-schrift);
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.ma-klappkopf {
    cursor: pointer;
}

details:not([open]) > .ma-klappkopf {
    border-bottom: 0;
}

/* Die Formen je Bildschirm folgen weiter unten. */
/* ---- Sprungmarke fuer die Tastatur ---- */

.ma-sprung {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 1100;
    padding: .6rem 1rem;
    border-radius: var(--ma-radius-klein);
    background: var(--ma-marke);
    color: var(--ma-marke-text);
    font-weight: 600;
}

.ma-sprung:focus {
    top: 1rem;
}

/* ---- Das Geruest ----

   Drei Formen aus demselben Markup:
     ab 1200 px   Seitenleiste mit Beschriftung
     ab  768 px   schmale Schiene, Beschriftung unter dem Symbol
     darunter     Reiterleiste am unteren Rand, in Daumenreichweite     */

.ma-geruest {
    display: grid;
    grid-template-columns: var(--ma-leiste) minmax(0, 1fr);
    min-height: 100dvh;
}

.ma-hauptteil {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ma-seitenleiste {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100dvh;
    padding: 1rem .85rem;
    overflow-y: auto;
    background: var(--ma-leistenfarbe);
    color: #fff;
}

/* Wortmarke statt Kundenlogo. In der Schiene bleibt nur das Symbol. */
.ma-wortmarke {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .85rem;
    color: #fff;
    font-size: 1.12rem;
    text-decoration: none;
}

.ma-wortmarke:hover {
    color: #fff;
}

.ma-wortmarke .bi {
    font-size: 1.35rem;
    color: var(--ma-marke-hell);
}

.ma-navliste {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ma-navliste a {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 46px;
    padding: .55rem .85rem;
    border-radius: var(--ma-radius-klein);
    color: rgba(255, 255, 255, .8);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.ma-navliste a i {
    font-size: 1.15rem;
}

.ma-navliste a:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.ma-navliste a.active {
    background: var(--ma-marke);
    color: var(--ma-marke-text);
    font-weight: 600;
}

.ma-navliste a:focus-visible {
    outline-color: var(--ma-marke-hell);
}

/* ---- Kopfleiste ---- */

.ma-kopfleiste {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 66px;
    padding: .6rem clamp(1rem, 2.5vw, 2rem);
    border-bottom: 1px solid var(--ma-rahmen);
    background: color-mix(in srgb, var(--ma-grund) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.ma-kopf-marke {
    display: none;
    color: var(--ma-text);
    white-space: nowrap;
    text-decoration: none;
}

.ma-schnellsuche {
    position: relative;
    flex: 1 1 auto;
    max-width: 38rem;
}

.ma-schnellsuche i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ma-gedaempft);
    pointer-events: none;
}

.ma-schnellsuche input {
    padding-left: 2.5rem;
    padding-right: 2.6rem;
    border-radius: 999px;
}

.ma-taste {
    position: absolute;
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 .45rem;
    border: 1px solid var(--ma-rahmen);
    border-radius: 6px;
    color: var(--ma-gedaempft);
    font-size: .75rem;
    pointer-events: none;
}

.ma-kopf-rechts {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}

.ma-rundknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ma-text);
    font-size: 1.1rem;
    text-decoration: none;
}

.ma-rundknopf:hover {
    background: var(--ma-grund-2);
    color: var(--ma-text);
}

.ma-benutzer {
    margin-right: .25rem;
    color: var(--ma-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
}

.ma-rolle {
    display: inline-block;
    margin-left: .4rem;
    padding: .08rem .45rem;
    border-radius: 999px;
    background: var(--ma-akzent-bg);
    color: var(--ma-akzent-fg);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ---- Reiterleiste und „Mehr" auf dem Telefon ---- */

.ma-reiter {
    display: none;
}

.ma-mehr {
    --bs-offcanvas-bg: var(--ma-flaeche);
    --bs-offcanvas-color: var(--ma-text);
    --bs-offcanvas-height: auto;
    max-height: 80dvh;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
}

.ma-mehr-liste {
    margin: 0;
    padding: 0 .5rem .5rem;
    list-style: none;
}

.ma-mehr-liste a,
.ma-mehr-liste button {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    min-height: 52px;
    padding: .5rem .75rem;
    border: 0;
    border-radius: var(--ma-radius-klein);
    background: transparent;
    color: var(--ma-text);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
}

.ma-mehr-liste a:hover,
.ma-mehr-liste button:hover {
    background: var(--ma-grund-2);
}

.ma-mehr-liste a.active {
    background: var(--ma-akzent-bg);
    color: var(--ma-akzent-fg);
    font-weight: 600;
}

/* ---- Inhalt ---- */

.ma-inhalt {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: clamp(1rem, 2.5vw, 2rem);
}

.ma-seitenkopf {
    margin-bottom: 1.25rem;
}

.ma-seitenkopf h1 {
    margin-bottom: .35rem;
}

/* ---- Die Buehne der Startseite ---- */

.ma-buehne {
    position: relative;
    margin-bottom: 1.25rem;
    padding: clamp(1.4rem, 4vw, 2.75rem);
    overflow: hidden;
    border-radius: 20px;
    background:
        radial-gradient(46rem 22rem at 100% -10%, rgba(13, 110, 253, .28), transparent 62%),
        linear-gradient(120deg, #1f2d3d, #2b3f55);
    color: #fff;
}

.ma-buehne-vorzeile {
    margin: 0 0 .35rem;
    font-family: var(--ma-titel);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ma-marke-hell);
}

.ma-buehne h1 {
    margin: 0 0 1.1rem;
    color: #fff;
}

.ma-buehne-suche {
    display: flex;
    gap: .5rem;
    max-width: 44rem;
}

.ma-buehne-suche input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    border: 0;
    border-radius: 999px;
    padding-inline: 1.3rem;
}

.ma-buehne-suche .btn {
    min-height: 52px;
    padding-inline: 1.4rem;
    border-radius: 999px;
}

.ma-buehne-text {
    max-width: 46rem;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: .92rem;
}

/* ---- Kennzahlen ---- */

.ma-kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .85rem;
    margin-bottom: 1.25rem;
}

.ma-kennzahl {
    display: block;
    padding: .95rem 1.1rem;
    border: 1px solid var(--ma-rahmen);
    border-radius: var(--ma-radius);
    background: var(--ma-flaeche);
    box-shadow: var(--ma-schatten);
    color: var(--ma-text);
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease;
}

a.ma-kennzahl:hover {
    transform: translateY(-2px);
    border-color: #9aa200;
    color: var(--ma-text);
}

.ma-kennzahl-wert {
    display: block;
    font-family: var(--ma-titel);
    font-weight: 700;
    font-size: clamp(1.9rem, 1.6rem + 1vw, 2.5rem);
    line-height: 1.05;
    color: var(--ma-dunkel);
}

.ma-kennzahl-name {
    display: block;
    color: var(--ma-gedaempft);
    font-size: .85rem;
}

/* ---- Balken fuer Anteile ---- */

.ma-loesung {
    margin: 0 0 .5rem;
}

.ma-belege {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    margin-left: .35rem;
    font-size: .8rem;
}

/* ---- Filter der Trefferliste ---- */

.ma-filterknopf {
    width: 100%;
    margin-bottom: .75rem;
}

@media (min-width: 992px) {
    .offcanvas-lg.ma-filterflaeche {
        --bs-offcanvas-bg: transparent;
    }

    .ma-filterflaeche .offcanvas-body {
        display: block;
        padding: 0;
    }
}

@media (max-width: 991.98px) {
    .ma-filterflaeche {
        --bs-offcanvas-bg: var(--ma-grund);
        --bs-offcanvas-color: var(--ma-text);
        --bs-offcanvas-height: 82dvh;
        border-radius: 18px 18px 0 0;
    }

    .ma-filterflaeche .ma-facetten {
        position: static;
        width: 100%;
    }
}

/*
 * Der Leitsatz steht auf der Startseite und ist bewusst kein Zierelement:
 * Wer hier sucht, soll wissen, dass der Nachweis im Original liegt und nicht
 * in dieser Anwendung.
 */
.ma-leitsatz {
    margin: 0;
    padding: .65rem .85rem;
    border-left: 3px solid var(--ma-link);
    background: var(--ma-flaeche);
    color: var(--ma-gedaempft);
    font-size: .92rem;
}

.card {
    border-color: var(--ma-rahmen);
}

.card-header {
    background: var(--ma-flaeche);
    border-bottom-color: var(--ma-rahmen);
    font-weight: 600;
    font-size: .95rem;
}

/* ---- Standtabellen (Schluessel/Wert) ---- */

.ma-stand th {
    width: 42%;
    font-weight: 500;
    color: var(--ma-gedaempft);
}

.ma-stand td {
    font-variant-numeric: tabular-nums;
}

.ma-meilensteine {
    padding-left: 1.1rem;
    margin-bottom: 0;
    font-size: .92rem;
}

.ma-migrationsliste {
    padding-left: 1.1rem;
    font-size: .9rem;
}

/* ---- Laufprotokoll ---- */

.ma-protokoll {
    padding: .85rem 1rem;
    margin: 0;
    background: var(--ma-code-grund);
    color: var(--ma-rahmen);
    font-size: .82rem;
    line-height: 1.5;
    max-height: 26rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Fuss ---- */

.ma-fuss {
    flex-shrink: 0;
    padding: 1rem clamp(1rem, 2.5vw, 2rem);
    border-top: 1px solid var(--ma-rahmen);
    color: var(--ma-gedaempft);
    font-size: .82rem;
}

/* ---- Schlichtes Layout: Anmeldung und Fehlerseiten ---- */

.ma-schlicht-mitte {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: 100dvh;
}

.ma-schlicht-buehne {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(2rem, 5vw, 4rem);
    background:
        radial-gradient(50rem 30rem at 0% 0%, rgba(13, 110, 253, .3), transparent 60%),
        linear-gradient(150deg, #1f2d3d, #2b3f55);
    color: #fff;
}

.ma-schlicht-buehne p {
    max-width: 30rem;
    margin: .5rem 0 0;
    color: rgba(255, 255, 255, .78);
}

.ma-schlicht-buehne strong {
    display: block;
    font-family: var(--ma-titel);
    font-weight: 700;
    font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.ma-schlicht-spalte {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.ma-schlicht-karte {
    width: 100%;
    max-width: 25rem;
}

.ma-marke {
    margin-bottom: 1.5rem;
}

.ma-schlicht-text {
    color: var(--ma-gedaempft);
    font-size: .92rem;
}

.ma-fehler-code {
    margin: 0 0 .5rem;
    font-family: var(--ma-titel);
    font-size: 3.4rem;
    font-weight: 700;
    color: var(--ma-dunkel);
    line-height: 1;
}

@media (max-width: 767.98px) {
    .ma-schlicht-mitte {
        grid-template-columns: minmax(0, 1fr);
    }

    .ma-schlicht-buehne {
        display: none;
    }
}

/* ====================================================================
   M5 — Suche, Trefferliste, Mailansicht
   ==================================================================== */

/* ---- Suchformular ---- */

.ma-suchform {
    margin-bottom: 1rem;
}

.ma-suchschalter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    margin-top: .6rem;
    font-size: .875rem;
}

.ma-hilfe-schalter {
    margin-left: auto;
    padding: 0;
    font-size: .875rem;
}

.ma-suchhilfe {
    margin-bottom: 1.2rem;
}

.ma-operatortabelle code {
    white-space: nowrap;
}

.ma-hilfe-hinweise {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .875rem;
}

.ma-hilfe-hinweise li {
    margin-bottom: .35rem;
}

/* ---- Hinweise ueber der Trefferliste ---- */

.ma-unvollstaendig,
.ma-suchhinweis {
    font-size: .9rem;
}

/* ---- Einstieg: was im Index liegt ---- */

.ma-einstieg {
    max-width: 44rem;
}

.ma-bestandstabelle {
    background: var(--ma-flaeche);
}

.ma-stand-ok {
    color: var(--ma-gruen-fg);
}

.ma-stand-offen {
    color: var(--ma-rot-fg);
    font-weight: 600;
}

.ma-einstieg-fuss {
    font-size: .85rem;
}

/* ---- Trefferkopf ---- */

.ma-trefferkopf {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: .5rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--ma-rahmen);
}

.ma-suchbegriff {
    font-weight: 600;
    color: var(--ma-dunkel);
}

.ma-dauer {
    margin-left: .5rem;
    font-size: .8rem;
    color: var(--ma-gedaempft);
}

.ma-sortierung {
    display: flex;
    gap: .25rem;
}

/* ---- Ein Treffer ---- */

.ma-treffer {
    padding: .85rem 1rem;
    margin-bottom: .6rem;
    background: var(--ma-flaeche);
    border: 1px solid var(--ma-rahmen);
    border-radius: .375rem;
}

.ma-treffer-betreff {
    margin: 0 0 .2rem;
    font-size: 1.02rem;
    line-height: 1.35;
}

.ma-treffer-betreff a {
    color: var(--ma-dunkel);
    text-decoration: none;
}

.ma-treffer-betreff a:hover {
    color: var(--ma-link);
    text-decoration: underline;
}

.ma-treffer-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    justify-content: space-between;
    font-size: .85rem;
    color: var(--ma-gedaempft);
}

.ma-adresse {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
}

.ma-datum-unsicher {
    border-bottom: 1px dotted var(--ma-gedaempft);
    cursor: help;
}

.ma-treffer-ausschnitt {
    margin: .45rem 0 .5rem;
    font-size: .875rem;
    color: var(--ma-gedaempft);
    line-height: 1.5;
}

.ma-treffer-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    font-size: .78rem;
}

.ma-treffer-postfach {
    margin-left: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    color: var(--ma-gedaempft);
}

.ma-treffer-kanaele {
    color: var(--ma-rahmen);
    cursor: help;
}

/* ---- Etiketten ----

   Die drei Pflichtkennzeichnungen aus docs/Sprachregelung.md fallen
   bewusst auf: Sie schraenken die Aussagekraft eines Treffers ein, und
   ein unauffaelliger Hinweis darauf waere keiner. */

.ma-etikett {
    display: inline-block;
    padding: .1rem .45rem;
    font-size: .72rem;
    line-height: 1.5;
    border-radius: .2rem;
    text-decoration: none;
    white-space: nowrap;
}

.ma-etikett-hinweis {
    background: var(--ma-grund-2);
    color: var(--ma-gedaempft);
}

.ma-etikett-kategorie {
    background: var(--ma-akzent-bg);
    color: var(--ma-akzent-fg);
}

.ma-etikett-kategorie:hover {
    background: var(--ma-akzent-bg);
    color: var(--ma-akzent-fg);
}

.ma-etikett-ocr {
    background: var(--ma-warn-bg);
    color: var(--ma-warn-fg);
    border: 1px solid var(--ma-warn-rand);
    white-space: normal;
}

.ma-etikett-anhang {
    background: var(--ma-info-bg);
    color: var(--ma-info-fg);
    border: 1px solid var(--ma-info-rand);
    white-space: normal;
}

.ma-etikett-verdacht {
    background: var(--ma-rot-bg);
    color: var(--ma-rot-fg);
    border: 1px solid var(--ma-rot-rand);
}

.ma-etikett-verlauf {
    background: var(--ma-grau-bg);
    color: var(--ma-grau-fg);
    text-decoration: none;
}

.ma-etikett-verlauf:hover {
    background: var(--ma-grau-rand);
    color: var(--ma-grau-fg);
}

/* ---- Keine Treffer ---- */

.ma-keine-treffer {
    padding: 1.1rem 1.25rem;
    background: var(--ma-flaeche);
    border: 1px solid var(--ma-rahmen);
    border-radius: .375rem;
}

.ma-keine-treffer ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .9rem;
}

.ma-keine-treffer li {
    margin-bottom: .35rem;
}

/* ---- Facetten ---- */

.ma-facetten {
    position: sticky;
    top: 1rem;
}

.ma-facette {
    padding: .7rem .85rem;
    margin-bottom: .6rem;
    background: var(--ma-flaeche);
    border: 1px solid var(--ma-rahmen);
    border-radius: .375rem;
}

.ma-facette h2 {
    margin: 0 0 .4rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ma-gedaempft);
}

.ma-facette ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ma-facette li a {
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    padding: .18rem .3rem;
    font-size: .85rem;
    color: var(--ma-gedaempft);
    text-decoration: none;
    border-radius: .2rem;
}

.ma-facette li a:hover {
    background: var(--ma-grund);
    color: var(--ma-link);
}

.ma-facette-wert {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-facette-zahl {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--ma-gedaempft);
}

.ma-facette-aktiv a {
    font-weight: 600;
    background: var(--ma-akzent-bg);
    color: var(--ma-akzent-fg);
}

.ma-facette-fuss {
    margin: .4rem 0 0;
    font-size: .72rem;
    color: var(--ma-gedaempft);
}

.ma-facette-gesetzt .ma-facette-zahl {
    font-weight: 700;
}

/* ---- Blaetterung ---- */

.ma-blaetterung {
    margin-top: 1rem;
}

.ma-blaetterung .pagination {
    margin-bottom: .35rem;
}

.ma-blaetterung-stand {
    margin: 0;
    font-size: .8rem;
    color: var(--ma-gedaempft);
}

/* ---- Mailansicht ---- */

.ma-mailnav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.ma-mailnav-verlauf {
    display: flex;
    gap: .25rem;
    margin-left: auto;
}

.ma-mail {
    padding: 1.25rem 1.5rem;
    background: var(--ma-flaeche);
    border: 1px solid var(--ma-rahmen);
    border-radius: .375rem;
}

.ma-mail-betreff {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--ma-dunkel);
}

.ma-verdachtshinweis {
    font-size: .9rem;
}

.ma-mailkopf {
    margin-bottom: 1.25rem;
    font-size: .9rem;
}

.ma-mailkopf th {
    width: 9rem;
    font-weight: 600;
    color: var(--ma-gedaempft);
    vertical-align: top;
}

.ma-mailkopf-suche {
    margin-left: .35rem;
    font-size: .8rem;
    color: var(--ma-gedaempft);
}

.ma-mail-postfach {
    margin-bottom: .2rem;
}

.ma-mail-score {
    font-size: .75rem;
    color: var(--ma-gedaempft);
}

/* ---- Anhaenge ---- */

.ma-anhaenge {
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--ma-grund);
    border-radius: .375rem;
}

.ma-anhangsliste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ma-anhangsliste li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    padding: .3rem 0;
    font-size: .875rem;
}

.ma-anhangsliste li + li {
    border-top: 1px solid var(--ma-rahmen);
}

.ma-anhang-name {
    font-weight: 500;
}

.ma-anhang-groesse {
    font-size: .8rem;
    color: var(--ma-gedaempft);
    font-variant-numeric: tabular-nums;
}

.ma-anhang-status {
    font-size: .75rem;
    padding: .05rem .4rem;
    border-radius: .2rem;
}

.ma-anhang-status-ok     { background: var(--ma-gruen-bg); color: var(--ma-gruen-fg); }
.ma-anhang-status-ocr    { background: var(--ma-warn-bg); color: var(--ma-warn-fg); }
.ma-anhang-status-offen  { background: var(--ma-grau-bg); color: var(--ma-grau-fg); }
.ma-anhang-status-fehlt  { background: var(--ma-rot-bg); color: var(--ma-rot-fg); }
.ma-anhang-status-inline { background: var(--ma-grund-2); color: var(--ma-gedaempft); }

.ma-inline-hinweis {
    margin: -.75rem 0 1.25rem;
    font-size: .8rem;
    color: var(--ma-gedaempft);
}

/* ---- Mailtext ---- */

.ma-mailtext h2,
.ma-herkunft h2 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ma-gedaempft);
    margin-bottom: .5rem;
}

.ma-mailtext-inhalt {
    max-height: 60rem;
    overflow: auto;
    padding: 1rem;
    margin: 0;
    background: var(--ma-grund);
    border: 1px solid var(--ma-rahmen);
    border-radius: .375rem;
    font-size: .875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.ma-mailtext-fuss {
    margin: .6rem 0 0;
    font-size: .8rem;
    color: var(--ma-gedaempft);
}

/* ---- Herkunft ---- */

.ma-herkunft {
    padding-top: 1.25rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--ma-rahmen);
}

.ma-herkunft-leitsatz,
.ma-herkunft-mehrfach {
    font-size: .85rem;
    color: var(--ma-gedaempft);
}

.ma-herkunftstabelle {
    font-size: .8rem;
}

.ma-pfad {
    word-break: break-all;
}

.ma-hash code {
    font-size: .7rem;
    word-break: break-all;
}

.ma-herkunft-id code {
    font-size: .75rem;
    word-break: break-all;
}

/* ---- Verlauf ---- */

.ma-verlauf-uebersicht {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    background: var(--ma-flaeche);
    border: 1px solid var(--ma-rahmen);
    border-radius: .375rem;
    font-size: .875rem;
}

.ma-verlauf-zahl {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ma-dunkel);
}

.ma-verlauf-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ma-gedaempft);
}

.ma-verlauf-einzel {
    font-size: .875rem;
}

/*
 * Der Hinweis auf nicht freigegebene Nachrichten im Verlauf.
 *
 * ZURUECKHALTEND UND NICHT ALARMIEREND. Es ist kein Fehler und keine
 * Warnung — es ist eine Angabe darueber, was die Ansicht nicht zeigt.
 * Ein rotes Kaestchen hier liesse jeden Verlauf nach einem Problem
 * aussehen, und nach dem dritten Mal liest es niemand mehr. Dieselbe
 * Ueberlegung wie bei einem Pruefwerkzeug, das im Normalbetrieb rot ist.
 */
.ma-verlauf-luecke {
    font-size: .875rem;
    margin: 0 0 1rem;
    padding: .5rem .75rem;
    border-left: 3px solid var(--ma-rahmen);
    background: var(--bs-tertiary-bg, var(--ma-grund-2));
}

.ma-verlaufsliste {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--ma-rahmen);
}

.ma-verlaufsliste li {
    position: relative;
    padding: .6rem 0 .6rem 1.1rem;
}

.ma-verlaufsliste li::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 1rem;
    width: 8px;
    height: 8px;
    background: var(--ma-rahmen);
    border-radius: 50%;
}

.ma-verlauf-aktuell::before {
    background: var(--ma-link) !important;
}

.ma-verlauf-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    font-size: .78rem;
    color: var(--ma-gedaempft);
}

.ma-verlauf-betreff {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    font-size: .9rem;
}

.ma-verlauf-wurzel {
    font-size: .72rem;
    color: var(--ma-gedaempft);
    cursor: help;
}

/* ---- Aussortierungsansicht ---- */

.ma-aussortiert-hinweis {
    font-size: .875rem;
}

.ma-stichprobenhinweis {
    font-size: .875rem;
}

.ma-aussortiertliste {
    background: var(--ma-flaeche);
    font-size: .85rem;
}

.ma-aussortiertliste thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ma-gedaempft);
    border-bottom-width: 1px;
}

.ma-aussortiert-datum {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--ma-gedaempft);
}

.ma-aussortiert-von {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    word-break: break-all;
}

.ma-aussortiert-herkunft {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .6rem;
    margin-top: .2rem;
    font-size: .72rem;
    color: var(--ma-gedaempft);
}

.ma-aussortiert-herkunft code {
    font-size: .7rem;
    color: var(--ma-gedaempft);
}

.ma-aussortiert-grund {
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--ma-gedaempft);
}

/* Die Stufe ist das Urteil — sie faellt auf, weil sie der Grund ist,
   warum die Mail nicht im Index steht. */

.ma-stufe {
    display: inline-block;
    padding: .1rem .45rem;
    font-size: .72rem;
    border-radius: .2rem;
    white-space: nowrap;
}

.ma-stufe-ordner    { background: var(--ma-grau-bg); color: var(--ma-grau-fg); }
.ma-stufe-urteil    { background: var(--ma-rot-bg); color: var(--ma-rot-fg); }
.ma-stufe-vorgang   { background: var(--ma-info-bg); color: var(--ma-info-fg); }
.ma-stufe-sonstiges { background: var(--ma-warn-bg); color: var(--ma-warn-fg); }

.ma-aussortiert-erklaerung dl {
    margin: 0;
    font-size: .8rem;
}

.ma-aussortiert-erklaerung dt {
    font-weight: 600;
    color: var(--ma-gedaempft);
}

.ma-aussortiert-erklaerung dd {
    margin: 0 0 .5rem;
    color: var(--ma-gedaempft);
}

/* ====================================================================
   M6 — KI-Auskunft
   ==================================================================== */

.ma-auskunftsform {
    margin-bottom: 1.2rem;
}

.ma-auskunft-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    justify-content: space-between;
    margin-top: .5rem;
    font-size: .8rem;
}

/* Der Endpunkt steht bei jeder Antwort und schon beim Fragen da — wer
   eine Auskunft liest, soll sehen, welches Modell sie erzeugt hat. */

.ma-endpunkt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    color: var(--ma-gedaempft);
    cursor: help;
}

.ma-auskunft-laeuft {
    opacity: .6;
}

/* ---- Einrichtungshinweis ---- */

.ma-auskunft-einrichtung {
    max-width: 48rem;
}

.ma-auskunft-datenschutz {
    font-size: .875rem;
}

.ma-auskunft-datenschutz p:last-child {
    margin-bottom: 0;
}

/* ---- Beispielfragen ---- */

.ma-auskunft-beispiele {
    max-width: 48rem;
    padding: 1rem 1.25rem;
    background: var(--ma-flaeche);
    border: 1px solid var(--ma-rahmen);
    border-radius: .375rem;
}

.ma-auskunft-beispiele ul {
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}

.ma-auskunft-beispiele li {
    margin-bottom: .3rem;
}

.ma-beispiel {
    padding: .2rem .5rem;
    font-size: .875rem;
    color: var(--ma-link);
    text-align: left;
    background: var(--ma-grund);
    border: 1px solid var(--ma-rahmen);
    border-radius: .2rem;
    cursor: pointer;
}

.ma-beispiel:hover {
    background: var(--ma-akzent-bg);
}

/* ---- Die Antwort ---- */

.ma-auskunft {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    background: var(--ma-flaeche);
    border: 1px solid var(--ma-rahmen);
    border-left: 4px solid var(--ma-link);
    border-radius: .375rem;
}

.ma-auskunft-text {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ma-dunkel);
}

/* Die Kennzeichnung ist Pflicht und faellt deshalb auf: Eine Antwort aus
   einem Sprachmodell ist ein Hinweis, kein Nachweis. */

.ma-auskunft-kennzeichnung {
    padding-top: .75rem;
    margin-top: 1rem;
    border-top: 1px solid var(--ma-rahmen);
    font-size: .8rem;
    color: var(--ma-gedaempft);
}

.ma-auskunft-gescheitert {
    font-size: .9rem;
}

/* ---- Quellen ---- */

.ma-quellen {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--ma-flaeche);
    border: 1px solid var(--ma-rahmen);
    border-radius: .375rem;
}

.ma-quellen h2 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ma-gedaempft);
    margin-bottom: .6rem;
}

.ma-quellenliste {
    margin: 0;
    padding-left: 1.3rem;
}

.ma-quellenliste li {
    margin-bottom: .6rem;
}

.ma-quellenliste a {
    font-weight: 500;
    color: var(--ma-dunkel);
}

.ma-quelle-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    font-size: .8rem;
    color: var(--ma-gedaempft);
}

/* ---- Rundenprotokoll ---- */

.ma-rundenprotokoll {
    padding: .85rem 1.25rem;
    background: var(--ma-grund);
    border: 1px solid var(--ma-rahmen);
    border-radius: .375rem;
}

.ma-rundenprotokoll h2 {
    margin: 0;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ma-rundenliste {
    margin: .75rem 0 0;
    padding-left: 1.3rem;
    font-size: .85rem;
}

.ma-rundenliste li {
    margin-bottom: .6rem;
}

.ma-runde-gedanke {
    margin-bottom: .2rem;
    font-style: italic;
    color: var(--ma-gedaempft);
}

.ma-runde-suche {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
}

.ma-runde-suche code {
    font-size: .8rem;
}

.ma-runde-treffer,
.ma-runde-dauer {
    font-size: .75rem;
    color: var(--ma-gedaempft);
}

.ma-runde-hinweis {
    color: var(--ma-gedaempft);
}

.ma-rundenfuss {
    margin: .5rem 0 0;
    font-size: .78rem;
    color: var(--ma-gedaempft);
}

.ma-auskunft-fehlanzeige {
    border-left-color: var(--ma-gedaempft);
}

.ma-auskunft-fehlanzeige h2 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ma-gedaempft);
    margin-bottom: .5rem;
}

/* ====================================================================
   Die Formen je Bildschirm
   ==================================================================== */

.ma-treffer,
.ma-facette {
    border-radius: var(--ma-radius-klein);
}

.ma-treffer {
    box-shadow: var(--ma-schatten);
}

.ma-facetten {
    top: 82px;
}

/* Tablet: schmale Schiene, Beschriftung unter dem Symbol. */
@media (max-width: 1199.98px) {
    .ma-geruest {
        grid-template-columns: var(--ma-schiene) minmax(0, 1fr);
    }

    .ma-seitenleiste {
        align-items: stretch;
        padding: .75rem .5rem;
    }

    .ma-wortmarke {
        justify-content: center;
        padding: .5rem 0;
    }

    .ma-wortmarke span {
        display: none;
    }

    .ma-navliste a {
        flex-direction: column;
        gap: .15rem;
        min-height: 60px;
        padding: .45rem .15rem;
        font-size: .68rem;
        line-height: 1.1;
        text-align: center;
    }

    .ma-navliste a i {
        font-size: 1.3rem;
    }
}

/* Telefon: Reiterleiste unten, in Daumenreichweite. */
@media (max-width: 767.98px) {
    .ma-geruest {
        grid-template-columns: minmax(0, 1fr);
    }

    .ma-seitenleiste,
    .ma-schnellsuche,
    .ma-benutzer,
    .ma-kopf-abmelden {
        display: none !important;
    }

    .ma-kopf-marke {
        display: block;
    }

    .ma-kopfleiste {
        min-height: 58px;
        padding-top: calc(.4rem + env(safe-area-inset-top));
        padding-bottom: .4rem;
    }

    .ma-hauptteil {
        padding-bottom: calc(var(--ma-tabbar) + env(safe-area-inset-bottom));
    }

    .ma-reiter {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1030;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--ma-leistenfarbe);
    }

    .ma-reiter a,
    .ma-reiter button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .1rem;
        height: var(--ma-tabbar);
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, .78);
        font-size: .7rem;
        font-weight: 500;
        text-decoration: none;
    }

    .ma-reiter i {
        display: block;
        padding: .1rem .9rem;
        border-radius: 999px;
        font-size: 1.2rem;
    }

    .ma-reiter a.active,
    .ma-reiter button.active {
        color: #fff;
        font-weight: 600;
    }

    .ma-reiter a.active i,
    .ma-reiter button.active i {
        background: var(--ma-marke);
        color: var(--ma-marke-text);
    }

    .ma-reiter a:focus-visible,
    .ma-reiter button:focus-visible {
        outline-color: var(--ma-marke-hell);
        outline-offset: -3px;
    }

    .ma-buehne-suche {
        flex-direction: column;
    }

    .ma-trefferkopf {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }

    .ma-sortierung {
        display: flex;
        gap: .35rem;
        overflow-x: auto;
    }

    .ma-sortierung .btn {
        flex: 0 0 auto;
    }

    .ma-suchschalter .form-check-inline {
        display: flex;
        align-items: center;
        gap: .6rem;
        min-height: 40px;
        margin-right: 0;
        padding-left: 0;
    }

    .ma-suchschalter .form-check-input {
        float: none;
        flex: 0 0 auto;
        margin: 0;
    }
}

/*
 * Tabellen werden auf dem Telefon zu Karten. `app.js` traegt die Kopfzeile als
 * `data-label` in jede Zelle ein; ohne JavaScript bleibt die Tabelle eine
 * Tabelle und scrollt seitlich.
 */
@media (max-width: 575.98px) {
    .ma-karten-tabelle > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .ma-karten-tabelle,
    .ma-karten-tabelle > tbody,
    .ma-karten-tabelle > tfoot {
        display: block;
        width: 100%;
    }

    .ma-karten-tabelle > tbody > tr,
    .ma-karten-tabelle > tfoot > tr {
        display: block;
        margin-bottom: .6rem;
        padding: .55rem .85rem;
        border: 1px solid var(--ma-rahmen);
        border-radius: var(--ma-radius-klein);
        background: var(--ma-flaeche);
    }

    .ma-karten-tabelle > tbody > tr > *,
    .ma-karten-tabelle > tfoot > tr > * {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .22rem 0;
        border: 0;
        text-align: right !important;
        overflow-wrap: anywhere;
        background: transparent;
        box-shadow: none;
    }

    .ma-karten-tabelle > tbody > tr > *:empty {
        display: none;
    }

    .ma-karten-tabelle > tbody > tr > *[data-label]::before,
    .ma-karten-tabelle > tfoot > tr > *[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--ma-gedaempft);
        font-size: .8rem;
        font-weight: 500;
        text-align: left;
    }

    /* Die erste Zelle ist die Ueberschrift der Karte. */
    .ma-karten-tabelle > tbody > tr > *:first-child {
        display: block;
        text-align: left !important;
        font-weight: 600;
    }

    .ma-karten-tabelle > tbody > tr > *:first-child::before {
        display: none;
    }
}

@media print {
    .ma-seitenleiste,
    .ma-kopfleiste,
    .ma-reiter,
    .ma-fuss {
        display: none !important;
    }

    .ma-geruest {
        display: block;
    }
}