/*
 * mmDial - Design-Schicht
 *
 * Diese Datei liegt bewusst nur einmal im Webroot und wird von allen vier
 * Apps benutzt (mainlogin, customer-admin, mini-admin, agents). In den
 * Vorlagen wird sie ueber {MMDIAL_ROOT_URL}css/mmdial.css eingebunden -
 * derselbe Gedanke wie beim gemeinsamen core-Verzeichnis. Wer hier etwas
 * aendert, aendert es fuer alle Apps auf einmal.
 *
 * Ladereihenfolge in der design.tpl der jeweiligen App:
 *   1. bootstrap-5.1.3.min.css           Raster, Utilities, Reboot
 *   2. style3.css                        verbliebene Seitenstile der App
 *   3. css/ui-1.13.3/jquery-ui.min.css   Widget-Grundlagen
 *   4. diese Datei                       Tokens, Marke, Shell, Korrekturen
 *
 * Diese Datei kommt zuletzt: sie faerbt Bootstrap und jQuery UI in die
 * mmDial-Farben ein und faengt die Nebenwirkungen von Bootstraps Reboot
 * auf die jQuery-UI-Widgets ab. Die Vendor-Dateien bleiben unveraendert und
 * damit aktualisierbar.
 *
 * Die Markenfarben stammen aus den Originalgrafiken (mmlogo.png,
 * top-bar.png) und wurden pixelgenau ausgelesen.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    /* Marke */
    --mm-blue-900: #042C53;
    --mm-blue-800: #004571;   /* Topbar dunkel */
    --mm-blue-700: #0C639B;   /* Topbar hell, Primaerfarbe */
    --mm-blue-500: #2D8BFF;   /* Logo-Blau, Akzent */
    --mm-blue-100: #E8F2FB;
    --mm-blue-050: #F5F9FD;

    --mm-ink-900: #14202B;    /* Ueberschriften */
    --mm-ink-700: #33404D;    /* Fliesstext */
    --mm-ink-500: #4A5560;    /* Sekundaertext */
    --mm-gray-500: #797D80;   /* Logo-Grau */

    --mm-line: #E1E7EE;
    --mm-surface: #FFFFFF;    /* Karten, Tabellen */
    --mm-surface-2: #F8FAFC;  /* Tabellenkopf, Streifen */
    --mm-canvas: #F5F7FA;     /* Seitenhintergrund */

    --mm-ok: #0F6E56;
    --mm-ok-bg: #E4F4EC;
    --mm-warn: #854F0B;
    --mm-warn-bg: #FAEEDA;
    --mm-err: #A32D2D;
    --mm-err-bg: #FCEBEB;

    --mm-radius: 8px;
    --mm-radius-sm: 6px;
    --mm-shadow: 0 1px 2px rgba(20, 32, 43, .06), 0 2px 8px rgba(20, 32, 43, .04);
    --mm-shadow-lg: 0 4px 16px rgba(20, 32, 43, .12), 0 8px 32px rgba(20, 32, 43, .08);

    --mm-topbar-h: 52px;
    --mm-icon-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%205%207%207-7%207'/%3E%3C/svg%3E");
    --mm-icon-kopfhoerer: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2013v-1a8%208%200%200%201%2016%200v1'/%3E%3Crect%20x='2.5'%20y='13'%20width='4.5'%20height='7'%20rx='1.6'/%3E%3Crect%20x='17'%20y='13'%20width='4.5'%20height='7'%20rx='1.6'/%3E%3C/svg%3E");
    --mm-icon-kopieren: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='9'%20width='11'%20height='11'%20rx='2'/%3E%3Cpath%20d='M6%2015H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v1'/%3E%3C/svg%3E");
    --mm-icon-haken: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m5%2012.5%204.5%204.5L19%207'/%3E%3C/svg%3E");
    --mm-icon-upload: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2016V4'/%3E%3Cpath%20d='m7.5%208.5%204.5-4.5%204.5%204.5'/%3E%3Cpath%20d='M4%2015v3.5A1.5%201.5%200%200%200%205.5%2020h13a1.5%201.5%200%200%200%201.5-1.5V15'/%3E%3C/svg%3E");
    --mm-icon-mond: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.5%2014.8A8.6%208.6%200%200%201%209.2%203.5a8.6%208.6%200%201%200%2011.3%2011.3z'/%3E%3C/svg%3E");
    --mm-icon-sonne: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%202.4v2.1'/%3E%3Cpath%20d='M12%2019.5v2.1'/%3E%3Cpath%20d='M4.2%204.2l1.5%201.5'/%3E%3Cpath%20d='M18.3%2018.3l1.5%201.5'/%3E%3Cpath%20d='M2.4%2012h2.1'/%3E%3Cpath%20d='M19.5%2012h2.1'/%3E%3Cpath%20d='M4.2%2019.8l1.5-1.5'/%3E%3Cpath%20d='M18.3%205.7l1.5-1.5'/%3E%3C/svg%3E");
    --mm-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Bootstrap auf die Marke ziehen */
    --bs-primary: #0C639B;
    --bs-primary-rgb: 12, 99, 155;
    --bs-link-color: #0C639B;
    --bs-link-hover-color: #004571;
    --bs-body-color: #33404D;
    --bs-body-bg: #F5F7FA;
    --bs-border-color: #E1E7EE;
    --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bs-border-radius: 8px;
}

[data-theme="dark"] {
    --mm-blue-100: #12304C;
    --mm-blue-050: #0F2739;

    --mm-ink-900: #E8EDF3;
    --mm-ink-700: #C2CCD8;
    --mm-ink-500: #8A97A5;
    --mm-gray-500: #8A939B;

    --mm-line: #26344A;
    --mm-surface: #16202E;
    --mm-surface-2: #1C2838;
    --mm-canvas: #0E1520;

    /* Die Schriftfarben muessen mitwandern. Vorher wurden nur die
       Hintergruende umgestellt, die Vordergruende blieben auf den Werten des
       hellen Designs stehen - dunkelgruen auf dunkelgruen. Jede
       Zustandsplakette war im dunklen Design praktisch unlesbar:
       .mm-lage, .ServerActiveStatus, .serverqueryok und alles andere, was
       ueber diese drei Tokens faerbt. */
    --mm-ok: #6EDCB4;
    --mm-ok-bg: #10322A;
    --mm-warn: #E9B764;
    --mm-warn-bg: #33280F;
    --mm-err: #F08A8A;
    --mm-err-bg: #331A1A;

    --mm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
    --mm-shadow-lg: 0 4px 16px rgba(0, 0, 0, .5), 0 8px 32px rgba(0, 0, 0, .4);

    --bs-body-color: #C2CCD8;
    --bs-body-bg: #0E1520;
    --bs-border-color: #26344A;
    --bs-secondary-bg: #1C2838;
}

/* ==========================================================================
   2. Grundlagen
   ========================================================================== */

html { height: 100%; }

body {
    font-family: var(--mm-font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--mm-ink-700);
    background: var(--mm-canvas);
    margin: 0;
    padding: 0;
    min-height: 100%;
}

a { color: var(--mm-blue-700); text-decoration: none; }
a:hover { color: var(--mm-blue-800); text-decoration: underline; }

h1, h2, h3, h4, h5 { color: var(--mm-ink-900); font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

/* ==========================================================================
   3. Layout-Shell
   ========================================================================== */

#topbar {
    background: var(--mm-blue-700);
    height: var(--mm-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: relative;
    z-index: 1030;
    box-shadow: var(--mm-shadow);
    /* die alte Grafik als Hintergrund entfaellt */
    background-image: none;
    width: auto;
    margin: 0;
}

#topbar img { height: 30px; width: auto; }

.mm-topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #DCEBF8;
    font-size: 13px;
}
.mm-topbar-actions a { color: #DCEBF8; text-decoration: none; }
.mm-topbar-actions a:hover { color: #FFFFFF; text-decoration: none; }

/* Die alten absolut positionierten Bloecke einreihen statt ueberlagern */
#logout, #to-agent {
    position: static;
    right: auto;
    top: auto;
}
#logout a, #to-agent a {
    color: #DCEBF8;
    font-size: 13px;
    padding-left: 20px;
    text-decoration: none;
}
#logout a:hover, #to-agent a:hover { color: #fff; font-weight: normal; }

/* Hauptnavigation */
#menu-top-shadow { background: var(--mm-surface); border-bottom: 1px solid var(--mm-line); }
#menu-top { margin: 0; position: static; }
#menu-top ul {
    list-style: none;
    margin: 0;
    padding: 0 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
#menu-top ul li {
    float: none;
    border: 0;
    background: transparent;
    padding: 0;
}
#menu-top ul li:hover { background: transparent; }
#menu-top ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    color: var(--mm-ink-500);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

/* Symbole als Maske statt als Bild: sie nehmen dadurch die Textfarbe an
   und passen sich Hover, aktivem Zustand und dunklem Theme von selbst an.
   Vorher lagen hier PNG-Grafiken als background-image ohne passenden
   Innenabstand - sie standen halb auf dem ersten Buchstaben.

   In @supports gekapselt: ohne Maskenunterstuetzung bliebe von jedem
   Symbol ein ausgefuelltes Quadrat stehen. Dann lieber gar keins. */
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    #menu-top ul li a::before {
        content: "";
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        background-color: currentColor;
        -webkit-mask: var(--mm-icon) no-repeat center / contain;
        mask: var(--mm-icon) no-repeat center / contain;
    }
    /* Eintraege ohne eigenes Symbol bekommen keinen leeren Platzhalter */
    #menu-top ul li a:not([class*="mm-i-"])::before { display: none; }
}

/* Die Symbole selbst. 24er-Raster, Strichstaerke 1.8, abgerundete Enden. */
.mm-i-home { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2010.5%2012%203l9%207.5'/%3E%3Cpath%20d='M5%209.6V21h14V9.6'/%3E%3Cpath%20d='M9.5%2021v-6.5h5V21'/%3E%3C/svg%3E"); }
.mm-i-agents { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='8'%20r='3.2'/%3E%3Cpath%20d='M2.8%2020c0-3.4%202.8-5.6%206.2-5.6s6.2%202.2%206.2%205.6'/%3E%3Cpath%20d='M16.4%205.6a3.2%203.2%200%200%201%200%206.2'/%3E%3Cpath%20d='M18%2020c0-2.4-.8-4.2-2.2-5.3'/%3E%3C/svg%3E"); }
.mm-i-campaigns { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2010H3.6A1.6%201.6%200%200%200%202%2011.6v1.8A1.6%201.6%200%200%200%203.6%2015H4l8%204.5v-14z'/%3E%3Cpath%20d='M17%209.2a4.2%204.2%200%200%201%200%205.6'/%3E%3Cpath%20d='M6%2015.2V19a1.4%201.4%200%200%200%201.4%201.4h.8A1.4%201.4%200%200%200%209.6%2019v-2.2'/%3E%3C/svg%3E"); }
.mm-i-lists { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206h12'/%3E%3Cpath%20d='M9%2012h12'/%3E%3Cpath%20d='M9%2018h12'/%3E%3Cpath%20d='M4%206h.01'/%3E%3Cpath%20d='M4%2012h.01'/%3E%3Cpath%20d='M4%2018h.01'/%3E%3C/svg%3E"); }
.mm-i-stats { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2020.5h17'/%3E%3Cpath%20d='M6.5%2020.5v-6'/%3E%3Cpath%20d='M11%2020.5v-11'/%3E%3Cpath%20d='M15.5%2020.5v-7.5'/%3E%3Cpath%20d='M20%2020.5v-13'/%3E%3C/svg%3E"); }
.mm-i-export { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5v11'/%3E%3Cpath%20d='m7.5%2010.5%204.5%204.5%204.5-4.5'/%3E%3Cpath%20d='M4%2020.5h16'/%3E%3C/svg%3E"); }
.mm-i-voices { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='2.8'%20width='6'%20height='11'%20rx='3'/%3E%3Cpath%20d='M5.2%2011.5a6.8%206.8%200%200%200%2013.6%200'/%3E%3Cpath%20d='M12%2018.3v2.9'/%3E%3C/svg%3E"); }
.mm-i-live { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='2.1'/%3E%3Cpath%20d='M8.4%208.4a5%205%200%200%200%200%207.2'/%3E%3Cpath%20d='M15.6%208.4a5%205%200%200%201%200%207.2'/%3E%3Cpath%20d='M5.6%205.6a9%209%200%200%200%200%2012.8'/%3E%3Cpath%20d='M18.4%205.6a9%209%200%200%201%200%2012.8'/%3E%3C/svg%3E"); }
.mm-i-menu { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M4%207h16'/%3E%3Cpath%20d='M4%2012h16'/%3E%3Cpath%20d='M4%2017h16'/%3E%3C/svg%3E"); }
.mm-i-server { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='7'%20rx='1.6'/%3E%3Crect%20x='3'%20y='13'%20width='18'%20height='7'%20rx='1.6'/%3E%3Cpath%20d='M6.5%207.5h.01'/%3E%3Cpath%20d='M6.5%2016.5h.01'/%3E%3C/svg%3E"); }
.mm-i-rechner { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='2.5'%20width='16'%20height='19'%20rx='2'/%3E%3Cpath%20d='M8%206.5h8'/%3E%3Cpath%20d='M8.5%2011h.01'/%3E%3Cpath%20d='M12%2011h.01'/%3E%3Cpath%20d='M15.5%2011h.01'/%3E%3Cpath%20d='M8.5%2014.5h.01'/%3E%3Cpath%20d='M12%2014.5h.01'/%3E%3Cpath%20d='M15.5%2014.5h.01'/%3E%3Cpath%20d='M8.5%2018h3.5'/%3E%3C/svg%3E"); }
.mm-i-hilfe { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M9.6%209.3a2.5%202.5%200%200%201%204.8.9c0%201.7-2.4%202.1-2.4%203.8'/%3E%3Cpath%20d='M12%2017.2h.01'/%3E%3C/svg%3E"); }
.mm-i-sprachen { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M3%2012h18'/%3E%3Cpath%20d='M12%203a14%2014%200%200%201%200%2018a14%2014%200%200%201%200-18'/%3E%3C/svg%3E"); }
.mm-i-stumm { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5.5%2010v2a6.5%206.5%200%200%200%209.9%205.5'/%3E%3Cpath%20d='M18.5%2012v-.6'/%3E%3Cpath%20d='M9.5%205.2A2.5%202.5%200%200%201%2014.5%205.5v4.3'/%3E%3Cpath%20d='M9.5%209.5v2.5a2.5%202.5%200%200%200%203.6%202.2'/%3E%3Cpath%20d='M12%2018.5v3'/%3E%3Cpath%20d='M3.5%203.5l17%2017'/%3E%3C/svg%3E"); }
.mm-i-stumm-aus { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9.5'%20y='2.6'%20width='5'%20height='11.4'%20rx='2.5'/%3E%3Cpath%20d='M5.5%2010v2a6.5%206.5%200%200%200%2013%200v-2'/%3E%3Cpath%20d='M12%2018.5v3'/%3E%3Cpath%20d='M8.5%2021.5h7'/%3E%3C/svg%3E"); }
.mm-i-person { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='3.6'/%3E%3Cpath%20d='M4.8%2020.2a7.2%207.2%200%200%201%2014.4%200'/%3E%3C/svg%3E"); }
.mm-i-anschrift { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021.5s7-6.1%207-11a7%207%200%201%200-14%200c0%204.9%207%2011%207%2011z'/%3E%3Ccircle%20cx='12'%20cy='10.2'%20r='2.6'/%3E%3C/svg%3E"); }
.mm-i-details { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9.2'/%3E%3Cpath%20d='M12%207.2h.01'/%3E%3Cpath%20d='M11%2011.6h1v5.2h1'/%3E%3C/svg%3E"); }
.mm-i-telefon { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6.2%203.5h3.1l1.6%203.9-2%201.2a11%2011%200%200%200%205.5%205.5l1.2-2%203.9%201.6v3.1a1.8%201.8%200%200%201-2%201.8A16.2%2016.2%200%200%201%204.4%205.5a1.8%201.8%200%200%201%201.8-2z'/%3E%3C/svg%3E"); }
.mm-i-auflegen { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21.6%2014.3c-1.2-.9-2.6-1.6-4.1-2a1.5%201.5%200%200%201-1.1-1.4v-1.3a12.6%2012.6%200%200%200-8.8%200v1.3a1.5%201.5%200%200%201-1.1%201.4c-1.5.4-2.9%201.1-4.1%202a1.4%201.4%200%200%200-.2%202l1.5%201.7a1.4%201.4%200%200%200%201.9.2%2015.4%2015.4%200%200%201%2012.8%200%201.4%201.4%200%200%200%201.9-.2l1.5-1.7a1.4%201.4%200%200%200-.2-2z'/%3E%3C/svg%3E"); }
.mm-i-aufnahme { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='6'%20fill='black'%20stroke='none'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='9.2'/%3E%3C/svg%3E"); }
.mm-i-aufnahme-stop { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='8'%20y='8'%20width='8'%20height='8'%20rx='1.2'%20fill='black'%20stroke='none'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='9.2'/%3E%3C/svg%3E"); }
.mm-i-status { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.5%206.5%209.7%2017.3l-5.2-5.2'/%3E%3C/svg%3E"); }
.mm-i-formular { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%204H7a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-7'/%3E%3Crect%20x='9'%20y='2'%20width='6'%20height='4'%20rx='1'/%3E%3Cpath%20d='M8.5%2012h5'/%3E%3Cpath%20d='M8.5%2016h3'/%3E%3Cpath%20d='M17.5%203.5a1.6%201.6%200%200%201%202.3%202.3L16.4%209.2l-2.4.6.6-2.4z'/%3E%3C/svg%3E"); }
/* Symbole der Zeilenaktionen in Kampagnen-, Listen- und Agententabellen.
   Der Bestand hatte dafuer PNG-Grafiken von 2005 in fester Groesse und
   Farbe (delete.png, edit.png, online.png, offline.png, rotate.png,
   export.png, db.png, download2.png, go.png, display.png,
   player_play.png, download.png). */
.mm-i-loeschen { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%206.5h16'/%3E%3Cpath%20d='M9.5%206.5V4.8A1.3%201.3%200%200%201%2010.8%203.5h2.4a1.3%201.3%200%200%201%201.3%201.3v1.7'/%3E%3Cpath%20d='M6.5%206.5%207.4%2019a1.6%201.6%200%200%200%201.6%201.5h6a1.6%201.6%200%200%200%201.6-1.5l.9-12.5'/%3E%3Cpath%20d='M10.5%2010v6.5'/%3E%3Cpath%20d='M13.5%2010v6.5'/%3E%3C/svg%3E"); }
.mm-i-bearbeiten { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020h4.2L19.4%208.8a2.1%202.1%200%200%200-3-3L5.2%2017z'/%3E%3Cpath%20d='M14.5%206.5l3%203'/%3E%3C/svg%3E"); }
.mm-i-aktiv { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.6'/%3E%3Cpath%20d='m8.3%2012.2%202.6%202.6%204.8-5.2'/%3E%3C/svg%3E"); }
.mm-i-inaktiv { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.6'/%3E%3Cpath%20d='m6.4%206.4%2011.2%2011.2'/%3E%3C/svg%3E"); }
.mm-i-drehen { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.2%2011.4a8.4%208.4%200%200%200-14.6-4'/%3E%3Cpath%20d='M3.8%2012.6a8.4%208.4%200%200%200%2014.6%204'/%3E%3Cpath%20d='M5.2%203.4v4.2h4.2'/%3E%3Cpath%20d='M18.8%2020.6v-4.2h-4.2'/%3E%3C/svg%3E"); }
.mm-i-archiv { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='4.5'%20rx='1.2'/%3E%3Cpath%20d='M5%208.5V19a1.5%201.5%200%200%200%201.5%201.5h11A1.5%201.5%200%200%200%2019%2019V8.5'/%3E%3Cpath%20d='M10%2012.5h4'/%3E%3C/svg%3E"); }
.mm-i-archiv-zurueck { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='4.5'%20rx='1.2'/%3E%3Cpath%20d='M5%208.5V19a1.5%201.5%200%200%200%201.5%201.5h11A1.5%201.5%200%200%200%2019%2019V8.5'/%3E%3Cpath%20d='M12%2018v-6.5'/%3E%3Cpath%20d='m9.2%2014.3%202.8-2.8%202.8%202.8'/%3E%3C/svg%3E"); }
.mm-i-ansehen { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2.4%2012S6%205.6%2012%205.6%2021.6%2012%2021.6%2012%2018%2018.4%2012%2018.4%202.4%2012%202.4%2012z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='2.9'/%3E%3C/svg%3E"); }
.mm-i-abspielen { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.6'/%3E%3Cpath%20d='M10.2%208.6%2015.6%2012l-5.4%203.4z'/%3E%3C/svg%3E"); }
.mm-i-verlauf { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.6%2012a8.4%208.4%200%201%200%202.5-6'/%3E%3Cpath%20d='M3.4%203.6v3.8h3.8'/%3E%3Cpath%20d='M12%207.6V12l3%201.8'/%3E%3C/svg%3E"); }
.mm-i-herunterladen { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5v11'/%3E%3Cpath%20d='m7.5%2010.5%204.5%204.5%204.5-4.5'/%3E%3Cpath%20d='M4%2016v2.5A2%202%200%200%200%206%2020.5h12a2%202%200%200%200%202-2V16'/%3E%3C/svg%3E"); }

/* Zeichen in der Live-Tabelle. Der Bestand hatte hier drei PNG-Grafiken:
   fuer eingehende und manuelle Anrufe zwei Schema-Symbole aus einem
   Diagrammeditor, und fuer den nicht erreichbaren Agenten einen
   Rettungsring (support.png). Alle drei waren farbig und standen damit
   auf den kraeftigen Zeilenfarben schlecht - als Maske nehmen sie die
   Schriftfarbe der Zeile an und passen immer. */
.mm-i-ruf-eingehend { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7.6%2013.4h3.9V9.5'/%3E%3Cpath%20d='M20.5%204%2011.5%2013.4'/%3E%3Cpath%20d='M4.4%206.5h2.9l1.5%203.6-1.9%201.2a10.4%2010.4%200%200%200%205.2%205.2l1.2-1.9%203.6%201.5v2.9a1.7%201.7%200%200%201-1.9%201.7A15.3%2015.3%200%200%201%202.7%208.4a1.7%201.7%200%200%201%201.7-1.9z'/%3E%3C/svg%3E"); }
.mm-i-ruf-manuell { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203.5h.01'/%3E%3Cpath%20d='M12%203.5h.01'/%3E%3Cpath%20d='M18%203.5h.01'/%3E%3Cpath%20d='M6%209h.01'/%3E%3Cpath%20d='M12%209h.01'/%3E%3Cpath%20d='M18%209h.01'/%3E%3Cpath%20d='M12%2014.5h.01'/%3E%3Cpath%20d='M5.6%2013.5h2.2l1.2%202.9-1.5%201a8.4%208.4%200%200%200%204.1%204.1l1-1.5%202.9%201.2v2.2'/%3E%3C/svg%3E"); }
/* Funkwellen mit Schraegstrich: der Rechner des Agenten meldet sich nicht */
.mm-i-kein-kontakt { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2018.6h.01'/%3E%3Cpath%20d='M8.6%2015.2a4.8%204.8%200%200%201%206.8%200'/%3E%3Cpath%20d='M5.2%2011.8a9.6%209.6%200%200%201%2013.6%200'/%3E%3Cpath%20d='M3.5%203.5l17%2017'/%3E%3C/svg%3E"); }
.mm-i-dokument { --mm-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%202H10a2%202%200%200%200-2%202v11a2%202%200%200%200%202%202h7a2%202%200%200%200%202-2V6z'/%3E%3Cpath%20d='M15%202v4h4'/%3E%3Cpath%20d='M5%208v10a3%203%200%200%200%203%203h7'/%3E%3C/svg%3E"); }

#menu-top ul li a:hover {
    color: var(--mm-blue-700);
    text-shadow: none;
    background-color: var(--mm-blue-050);
}
#menu-top ul li a.active,
#menu-top ul li.active a {
    color: var(--mm-blue-700);
    border-bottom-color: var(--mm-blue-500);
}

/* Inhaltsbereich: Seitenleiste und Hauptspalte */
.mm-layout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Volle Bildschirmbreite. Das Leadmanagement zeigt sehr breite Tabellen und
   war schon vorher darauf ausgelegt, den ganzen Platz zu nutzen. */
body.mm-wide .mm-layout { max-width: none; padding: 10px; }

#menu-left {
    float: none;
    width: 210px;
    flex: 0 0 210px;
    margin: 0;
    padding: 10px;
    min-height: 0;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow);
}

#content-container {
    flex: 1 1 auto;
    min-width: 0;            /* verhindert, dass breite Tabellen das Raster sprengen */
    width: auto;
    margin: 0;
    padding: 16px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow);
    text-align: left;
}

a.submenu {
    display: block;
    border: 0;
    border-radius: var(--mm-radius-sm);
    color: var(--mm-ink-700);
    font-size: 13.5px;
    margin: 0 0 2px;
    padding: 7px 9px;
    text-decoration: none;
}
a.submenu:hover { background-color: var(--mm-blue-050); color: var(--mm-blue-700); }

h2.page-msg {
    background: transparent;
    background-image: none;
    border: 0;
    border-bottom: 1px solid var(--mm-line);
    color: var(--mm-ink-900);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 14px;
    padding: 0 0 10px;
    /* damit ein Bedienelement neben dem Titel stehen kann, ohne dass die
       Trennlinie darunter zerreisst */
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Quadratischer Knopf, der nur ein Symbol traegt. Ohne Maskenunterstuetzung
   bleibt die Beschriftung im Knopf stehen, damit er bedienbar bleibt. */
.mm-icon-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    color: var(--mm-ink-500);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.mm-icon-button:hover {
    background: var(--mm-blue-050);
    border-color: var(--mm-blue-500);
    color: var(--mm-blue-700);
}
.mm-icon-button[aria-expanded="true"] {
    background: var(--mm-blue-100);
    border-color: var(--mm-blue-500);
    color: var(--mm-blue-800);
}

@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .mm-icon-button { width: 32px; padding: 0; }
    .mm-icon-button > span { display: none; }
    .mm-icon-button::before {
        content: "";
        width: 18px;
        height: 18px;
        background-color: currentColor;
        -webkit-mask: var(--mm-icon) no-repeat center / contain;
        mask: var(--mm-icon) no-repeat center / contain;
    }
}

#footer {
    color: var(--mm-gray-500);
    font-size: 12px;
    text-align: center;
    padding: 12px 0 4px;
}
#footer a { color: inherit; }

/* Anmeldeseite */
#container { padding: 24px 14px; }
#login-container {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 40px auto;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: 12px;
    box-shadow: var(--mm-shadow-lg);
    padding: 24px;
}
.mm-login-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--mm-ink-900);
    margin: 0 0 6px;
}
.mm-login-intro {
    color: var(--mm-ink-500);
    font-size: 13.5px;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mm-line);
}

/* Hinweisseiten: falsches Passwort, abgemeldet, nicht angemeldet */
.mm-notice {
    max-width: 560px;
    margin: 40px auto;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: 12px;
    box-shadow: var(--mm-shadow);
    padding: 24px;
}
.mm-notice h1 { font-size: 1.25rem; margin: 0 0 12px; }
.mm-notice p { margin: 0 0 10px; }
.mm-notice p:last-child { margin-bottom: 0; }
.mm-notice--error h1 { color: var(--mm-err); }

.mm-button {
    display: inline-block;
    background: var(--mm-blue-700);
    border-radius: var(--mm-radius-sm);
    color: #fff;
    font-weight: 500;
    padding: 9px 18px;
    text-decoration: none;
}
.mm-button:hover { background: var(--mm-blue-800); color: #fff; text-decoration: none; }

form#loginform label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--mm-ink-500);
    margin-bottom: 4px;
}
form#loginform input[type=text],
form#loginform input[type=password] {
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    display: block;
    padding: 9px 11px;
    width: 100%;
    margin-bottom: 14px;
    font-size: 14px;
    background: var(--mm-surface);
    color: var(--mm-ink-700);
}
form#loginform input[type=text]:focus,
form#loginform input[type=password]:focus {
    outline: 0;
    border-color: var(--mm-blue-500);
    box-shadow: 0 0 0 3px rgba(45, 139, 255, .15);
}
form#loginform input[type=submit] {
    background: var(--mm-blue-700);
    border: 0;
    border-radius: var(--mm-radius-sm);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 18px;
    width: 100%;
}
form#loginform input[type=submit]:hover { background: var(--mm-blue-800); }

/* ==========================================================================
   4. Reboot-Korrektur fuer jQuery UI
   Bootstrap setzt box-sizing global und formatiert button/input/table/label
   neu. Das schlaegt ueber die Kaskade in die Widgets durch.
   ========================================================================== */

.ui-widget,
.ui-widget *,
.ui-widget :before,
.ui-widget :after { box-sizing: content-box; }

/* Ausnahmen: hier ist border-box richtig, sonst brechen die Layouts */
.ui-dialog,
.ui-dialog *,
.ui-accordion-content,
.ui-tabs-panel { box-sizing: border-box; }

/* Bootstrap gibt Tabellen margin-bottom und volle Breite - nicht in Widgets */
.ui-widget table { margin-bottom: 0; width: auto; }
.ui-datepicker table { margin: 0 0 .4em; width: 100%; }

/* Reboot setzt label auf display:inline-block mit margin */
.ui-widget label { margin-bottom: 0; }

/* Reboot entfernt die Button-Darstellung, die jQuery UI erwartet */
.ui-button { line-height: normal; }

/* ==========================================================================
   5. jQuery UI in Markenfarben
   Als Override, damit die Vendor-Datei austauschbar bleibt.
   ========================================================================== */

.ui-widget { font-family: var(--mm-font); font-size: 14px; }
.ui-widget-content {
    background: var(--mm-surface);
    border-color: var(--mm-line);
    color: var(--mm-ink-700);
}
.ui-widget-content a { color: var(--mm-blue-700); }

.ui-widget-header {
    background: var(--mm-blue-700);
    border-color: var(--mm-blue-700);
    color: #fff;
    font-weight: 600;
}
.ui-widget-header a { color: #fff; }

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    color: var(--mm-ink-700);
    border-radius: var(--mm-radius-sm);
    font-weight: 500;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-button:hover,
.ui-state-focus,
.ui-button:focus {
    background: var(--mm-blue-050);
    border-color: var(--mm-blue-500);
    color: var(--mm-blue-800);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background: var(--mm-blue-700);
    border-color: var(--mm-blue-700);
    color: #fff;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
    background: var(--mm-ok-bg);
    border-color: var(--mm-ok);
    color: var(--mm-ok);
}
.ui-state-error,
.ui-widget-content .ui-state-error {
    background: var(--mm-err-bg);
    border-color: var(--mm-err);
    color: var(--mm-err);
}
.ui-state-error-text, .ui-priority-primary { color: var(--mm-err); }

/* Links innerhalb der Zustandsklassen. jQuery UI setzt hier eigene Farben -
   unter anderem .ui-state-active a auf reines Weiss. Das ist nur richtig,
   solange der aktive Hintergrund auch dunkel ist. */
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: var(--mm-ink-700); }
.ui-state-hover a, .ui-state-hover a:link, .ui-state-hover a:visited { color: var(--mm-blue-800); }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #fff; }

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-radius: var(--mm-radius-sm); }

/* Stapelreihenfolge: jQuery UI legt alles, was ueber dem Inhalt schwebt -
   Dialoge, Menues, Kalender - auf z-index 100. Die Kopfleiste liegt bei
   1030. Ein Dialog, der wie im Agenteninterface dicht unter dem
   Fensterrand geoeffnet wird (17 Stellen mit at: "center top+10"),
   verschwand dadurch mit seiner Titelzeile hinter der Kopfleiste: man sah
   den Inhalt, aber nicht, worum es ging.

   Schwebende Elemente gehoeren ueber die Kopfleiste, nicht darunter. */
.ui-front { z-index: 1040; }
.ui-widget-overlay { z-index: 1035; }

/* Dialoge - der mit Abstand haeufigste Widget-Typ */
.ui-dialog {
    z-index: 1040;
    border: 0;
    border-radius: 12px;
    box-shadow: var(--mm-shadow-lg);
    padding: 0;
    background: var(--mm-surface);
    max-width: calc(100vw - 24px);
}
.ui-dialog .ui-dialog-titlebar {
    background: var(--mm-blue-700);
    border: 0;
    border-radius: 12px 12px 0 0;
    color: #fff;
    padding: 12px 16px;
}
.ui-dialog .ui-dialog-title { font-weight: 600; font-size: 15px; }
.ui-dialog .ui-dialog-content { padding: 16px; color: var(--mm-ink-700); }
.ui-dialog .ui-dialog-buttonpane {
    background: var(--mm-surface-2);
    border-top: 1px solid var(--mm-line);
    border-radius: 0 0 12px 12px;
    margin: 0;
    padding: 10px 12px;
}
.ui-dialog .ui-dialog-buttonpane button {
    background: var(--mm-blue-700);
    border: 1px solid var(--mm-blue-700);
    border-radius: var(--mm-radius-sm);
    color: #fff;
    font-weight: 500;
    padding: 7px 15px;
}
.ui-dialog .ui-dialog-buttonpane button:hover { background: var(--mm-blue-800); border-color: var(--mm-blue-800); }
.ui-widget-overlay { background: rgba(20, 32, 43, .45); opacity: 1; }

/* Akkordeon */
.ui-accordion .ui-accordion-header {
    background: var(--mm-surface-2);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    color: var(--mm-ink-900);
    font-weight: 600;
    margin-top: 6px;
    padding: 10px 12px 10px 34px;
    position: relative;
}
.ui-accordion .ui-accordion-header,
.ui-accordion .ui-accordion-header a,
.ui-accordion .ui-accordion-header a:link,
.ui-accordion .ui-accordion-header a:visited { color: var(--mm-ink-900); text-decoration: none; }

.ui-accordion .ui-accordion-header:hover { background: var(--mm-blue-050); border-color: var(--mm-blue-500); }

/* Der aufgeklappte Abschnitt bekommt einen hellen Grund, also gehoert auch
   dunkle Schrift hinein - sonst greift die Weiss-Regel von jQuery UI und
   der Titel verschwindet auf dem Hintergrund. */
.ui-accordion .ui-accordion-header.ui-state-active,
.ui-accordion .ui-accordion-header.ui-state-active a,
.ui-accordion .ui-accordion-header.ui-state-active a:link,
.ui-accordion .ui-accordion-header.ui-state-active a:visited {
    color: var(--mm-blue-800);
}
.ui-accordion .ui-accordion-header.ui-state-active {
    background: var(--mm-blue-100);
    border-color: var(--mm-blue-500);
}

/* Das Dreieck links stammte aus einer Sprite-Grafik, die je Zustand die
   Farbe wechselte - im aktiven Zustand nach Weiss und damit auf dem hellen
   Grund unsichtbar. Jetzt eine Maske, die die Textfarbe uebernimmt.
   Ohne Maskenunterstuetzung bleibt die Sprite-Grafik unangetastet. */
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
        position: absolute;
        left: 11px;
        top: 50%;
        margin: 0;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        background-color: currentColor;
        background-image: none;
        text-indent: 0;
        -webkit-mask: var(--mm-icon-chevron) no-repeat center / contain;
        mask: var(--mm-icon-chevron) no-repeat center / contain;
        transition: transform .15s ease;
    }
    .ui-accordion .ui-accordion-header.ui-state-active .ui-accordion-header-icon {
        transform: translateY(-50%) rotate(90deg);
    }
}

.ui-accordion .ui-accordion-content { border-color: var(--mm-line); padding: 12px; }

/* Fortschritt und Schieberegler */
.ui-progressbar { background: var(--mm-surface-2); border-color: var(--mm-line); border-radius: 999px; height: 18px; }
.ui-progressbar .ui-progressbar-value { background: var(--mm-blue-500); border: 0; border-radius: 999px; margin: 0; }
.ui-slider { background: var(--mm-surface-2); border-color: var(--mm-line); }
.ui-slider .ui-slider-handle { background: var(--mm-blue-700); border-color: var(--mm-blue-700); border-radius: 50%; }
.ui-slider .ui-slider-range { background: var(--mm-blue-500); }

/* Datumsauswahl */
.ui-datepicker { border-radius: var(--mm-radius); box-shadow: var(--mm-shadow-lg); padding: 6px; }
.ui-datepicker .ui-datepicker-header { background: var(--mm-blue-700); border: 0; border-radius: var(--mm-radius-sm); color: #fff; }
.ui-datepicker td a, .ui-datepicker td span { border-radius: 4px; text-align: center; }

/* ==========================================================================
   6. Startseite
   ========================================================================== */

.mm-dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--mm-ink-500);
    margin-bottom: 14px;
}

/* Gleich breite Kacheln. Vorher lagen die beiden Anzeigen in zwei
   unterschiedlich breiten float-Spalten - im schmaleren brach die
   Beschriftung um und schob die Anzeige nach unten, sodass die beiden
   Kreise nicht mehr auf einer Hoehe standen. */
.mm-dash {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.mm-card {
    display: flex;
    flex-direction: column;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    padding: 14px;
}
/* nimmt die ganze Zeile ein, egal wie viele Spalten das Raster gerade hat */
.mm-card--breit { grid-column: 1 / -1; }

.mm-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mm-ink-900);
    margin: 0 0 10px;
    border: 0;
    padding: 0;
    /* zwei Zeilen Platz, damit lange Titel die Kachelhoehe nicht
       auseinanderziehen */
    min-height: 2.5em;
}
.mm-card-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
}
.mm-card-note {
    color: var(--mm-ink-500);
    font-size: 12px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--mm-line);
}

/* Kacheln, deren Zahlen noch nicht ermittelt werden */
.mm-card--leer { border-style: dashed; }
.mm-leer-hinweis {
    color: var(--mm-ink-500);
    font-size: 13px;
    margin: 0;
    text-align: center;
}

.mm-dash-fuss { color: var(--mm-ink-500); font-size: 13px; margin: 18px 0 0; }

/* Anzeige, solange die Zahlen noch nachgeladen werden */
.progress-radial.mm-laedt {
    background: var(--mm-surface-2);
    animation: mm-pulsieren 1.4s ease-in-out infinite;
}
.progress-radial.mm-laedt .overlay { color: var(--mm-ink-500); }
@keyframes mm-pulsieren {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
    .progress-radial.mm-laedt { animation: none; }
}

.mm-stand { color: var(--mm-gray-500); white-space: nowrap; }

/* Kachel "Agenten online": grosse Gesamtzahl, darunter die Aufteilung */
.mm-agenten { width: 100%; text-align: center; }
.mm-agenten-summe { margin-bottom: 10px; }
.mm-agenten-summe .mm-zahl {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    color: var(--mm-blue-700);
}
.mm-agenten-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.mm-agenten-tabelle th,
.mm-agenten-tabelle td {
    padding: 4px 6px;
    border: 0;
    text-align: right;
}
.mm-agenten-tabelle thead th {
    color: var(--mm-ink-500);
    font-weight: 500;
    border-bottom: 1px solid var(--mm-line);
}
.mm-agenten-tabelle tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--mm-ink-700);
    white-space: nowrap;
}
.mm-agenten-tabelle tbody td { font-variant-numeric: tabular-nums; }
.mm-agenten-tabelle tr.mm-leer-zeile th,
.mm-agenten-tabelle tr.mm-leer-zeile td { color: var(--mm-gray-500); }

/* Ganz ausgeblendete Zeile. Eigene Klasse statt display per Skript:
   jQuery macht aus einem versteckten tr sonst je nach Browser ein
   display:block und zerlegt damit die Tabelle. */
.mm-zeile-aus { display: none; }

/* Kachel "Anrufe heute": das Diagramm fuellt die Kachel aus */
.mm-verlauf { width: 100%; height: 100%; min-height: 130px; }

/* Kachel "Aktive Kampagnen" */
.mm-kampagnen {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.mm-kampagnen th,
.mm-kampagnen td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--mm-line);
    text-align: left;
}
.mm-kampagnen thead th {
    color: var(--mm-ink-500);
    font-weight: 600;
    white-space: nowrap;
}
.mm-kampagnen .mm-zahl-spalte { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-kampagnen tbody tr:last-child th,
.mm-kampagnen tbody tr:last-child td { border-bottom: 0; }
.mm-kampagnen tbody tr:hover td { background: var(--mm-blue-050); }
/* Kampagne ohne angemeldete Agenten - laeuft gerade nicht */
.mm-kampagnen tbody tr.mm-leer-zeile td { color: var(--mm-gray-500); }
.mm-kampagnen td.mm-leer-hinweis { text-align: center; color: var(--mm-ink-500); }

/* Name und Live-Knopf stehen in einer Zelle nebeneinander. Der Knopf
   erscheint erst beim Ueberfahren der Zeile, damit die Tabelle ruhig
   bleibt - auf Tastatur und Beruehrung ist er immer sichtbar. */
.mm-kampagne-name {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mm-kampagne-name a:first-child { font-weight: 500; }

.mm-live-knopf {
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity .12s ease;
    text-decoration: none;
    /* etwas kleiner als der Knopf in der Ueberschrift, er sitzt in einer
       Tabellenzeile */
    height: 26px;
    min-width: 26px;
}
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .mm-live-knopf { width: 26px; }
    .mm-live-knopf::before { width: 15px; height: 15px; }
}
.mm-kampagnen tbody tr:hover .mm-live-knopf,
.mm-live-knopf:focus { opacity: 1; }
.mm-live-knopf:hover { text-decoration: none; }

@media (hover: none) {
    /* Ohne Mauszeiger gibt es kein Ueberfahren */
    .mm-live-knopf { opacity: 1; }
}

/* Die breite Kachel braucht keine feste Mindesthoehe fuer eine Tabelle */
.mm-card--breit .mm-card-body { display: block; min-height: 0; }

/* In der Kachel steht die Anzeige mittig und traegt keinen Aussenabstand */
.mm-card .progress-radial { margin: 0; }

/* Diagrammflaechen. Chart.js zeichnet in ein Canvas, das sich der Breite
   des Containers anpasst - der Container muss dafuer eine Hoehe haben. */
.mm-chart {
    position: relative;
    width: 100%;
    min-height: 220px;
}
.mm-chart canvas { max-width: 100%; }

/* Auswertung ohne Treffer im gewaehlten Zeitraum */
.mm-chart-ohne-daten {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--mm-line);
    border-radius: var(--mm-radius);
    background: var(--mm-surface-2);
    text-align: center;
}
.mm-chart-titel { font-weight: 600; color: var(--mm-ink-900); margin: 0 0 6px; }
.mm-chart-leer { color: var(--mm-ink-500); font-size: 13px; margin: 0; }

/* Aufgezogener Bereich beim Hineinzoomen */
.mm-chart-zoom {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(45, 139, 255, .15);
    border-left: 1px solid var(--mm-blue-500);
    border-right: 1px solid var(--mm-blue-500);
    pointer-events: none;
}

/* ==========================================================================
   7. Bestandsmarkup
   ========================================================================== */

table.tablesorter,
table.tablesorter_nofilter {
    width: 100%;
    border-collapse: collapse;
    background: var(--mm-surface);
    font-size: 13.5px;
}
table.tablesorter th,
table.tablesorter_nofilter th {
    background: var(--mm-surface-2);
    border-bottom: 1px solid var(--mm-line);
    color: var(--mm-ink-500);
    font-weight: 600;
    padding: 9px 10px;
    text-align: left;
}
table.tablesorter td,
table.tablesorter_nofilter td {
    border-bottom: 1px solid var(--mm-line);
    padding: 8px 10px;
    vertical-align: middle;
}
table.tablesorter tbody tr:hover { background: var(--mm-blue-050); }

/*
 * Zeilen, die der Spaltenfilter ausgeschlossen hat.
 *
 * Das Filter-Widget setzt an ihnen die Klasse aus filter_filteredRow
 * (Vorgabe "filtered") und verlaesst sich darauf, dass das Design sie
 * ausblendet - genau diese Regel steht in der mitgelieferten
 * theme.default.css, die hier nie eingebunden war. Solange tablesorter
 * 2.14 lief, fiel das nicht auf: die alte Fassung setzte zusaetzlich
 * style.display der Zeile. In der 2.31.3, die hier liegt, fehlt an
 * dieser Stelle das ".style" - geschrieben wird auf eine bedeutungslose
 * Eigenschaft des Elements. Der Filter rechnete also weiterhin richtig,
 * nur verschwand keine Zeile mehr.
 *
 * Die Zeilenklassen sind nicht auf Tabellen mit tablesorter-Klasse
 * beschraenkt (die Live-Ansicht benutzt tablesorter_megaspecial),
 * deshalb ohne Tabellenselektor.
 */
tr.filtered { display: none; }

/*
 * Zeilenaktion: ein anklickbares Symbol in einer Tabellenzeile.
 *
 * Vorher standen dort PNG-Grafiken von 2005 - fest in Groesse und Farbe,
 * im dunklen Design als helle Kloetzchen, und ohne Fokusanzeige. Als
 * Maske nehmen die Symbole die Textfarbe an und lassen sich hervorheben.
 *
 * Die Beschriftung steckt als span im Element und wird nur ausgeblendet,
 * wenn Masken unterstuetzt werden - sonst bliebe von der Schaltflaeche
 * nichts uebrig, was man anklicken koennte.
 */
.mm-tat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: var(--mm-radius-sm);
    color: var(--mm-ink-500);
    cursor: pointer;
    font-size: 12px;
    vertical-align: middle;
}
a > .mm-tat { color: inherit; }
a:hover > .mm-tat,
.mm-tat:hover { background: var(--mm-blue-050); color: var(--mm-blue-700); text-decoration: none; }
a:focus-visible > .mm-tat { outline: 2px solid var(--mm-blue-500); outline-offset: 1px; }

/* Loeschen faerbt beim Ueberfahren rot - das ist die eine Aktion, die
   sich nicht zuruecknehmen laesst. */
a:hover > .mm-tat.mm-i-loeschen,
.mm-tat.mm-i-loeschen:hover { background: var(--mm-err-bg); color: var(--mm-err); }

/* Zustandssymbole tragen ihre Bedeutung in der Farbe */
.mm-tat.mm-i-aktiv { color: var(--mm-ok); }
.mm-tat.mm-i-inaktiv { color: var(--mm-gray-500); }

@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .mm-tat { width: 26px; padding: 0; }
    .mm-tat > span { display: none; }
    .mm-tat::before {
        content: "";
        width: 17px;
        height: 17px;
        background-color: currentColor;
        -webkit-mask: var(--mm-icon) no-repeat center / contain;
        mask: var(--mm-icon) no-repeat center / contain;
    }
}

/*
 * Schaltflaechen des Bestandsmarkups.
 *
 * Hunderte von <button> und <input type="submit"> im Bestand - "Ausfuehren",
 * "Speichern", "Suchen" - standen im Werkszustand des Browsers da: graues
 * Relief, Systemschrift, im dunklen Design ein heller Kasten. Sie bekommen
 * dieselbe Form wie .mm-knopf, ohne dass jede einzelne Stelle angefasst
 * werden muss.
 *
 * Ausgenommen ist alles, was schon eine eigene Gestalt hat: die Widgets
 * von jQuery UI (.ui-button) und die eigenen Bauteile (mm-*). Das steht
 * hier als :not(), weil input[type="submit"] mit seinem Attributselektor
 * sonst spezifischer waere als eine Klasse und die Bauteile
 * ueberschreiben wuerde.
 */
button:not([class*="mm-"]):not(.ui-button):not(.mmclosebutton):not(.mmminusbutton):not(.tablesorter-filter),
input[type="submit"]:not([class*="mm-"]):not(.ui-button),
input[type="button"]:not([class*="mm-"]):not(.ui-button),
input[type="reset"]:not([class*="mm-"]):not(.ui-button) {
    appearance: none;
    -webkit-appearance: none;
    background: var(--mm-blue-700);
    border: 1px solid var(--mm-blue-700);
    border-radius: var(--mm-radius-sm);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    padding: 7px 15px;
    text-decoration: none;
}
button:not([class*="mm-"]):not(.ui-button):not(.mmclosebutton):not(.mmminusbutton):not(.tablesorter-filter):hover,
input[type="submit"]:not([class*="mm-"]):not(.ui-button):hover,
input[type="button"]:not([class*="mm-"]):not(.ui-button):hover,
input[type="reset"]:not([class*="mm-"]):not(.ui-button):hover {
    background: var(--mm-blue-800);
    border-color: var(--mm-blue-800);
    color: #fff;
}
button:not([class*="mm-"]):not(.ui-button):not(.mmclosebutton):not(.mmminusbutton):not(.tablesorter-filter):focus-visible,
input[type="submit"]:not([class*="mm-"]):not(.ui-button):focus-visible,
input[type="button"]:not([class*="mm-"]):not(.ui-button):focus-visible,
input[type="reset"]:not([class*="mm-"]):not(.ui-button):focus-visible {
    outline: 2px solid var(--mm-blue-500);
    outline-offset: 2px;
}
button:not([class*="mm-"]):not(.ui-button):not(.mmclosebutton):not(.mmminusbutton):not(.tablesorter-filter):disabled,
input[type="submit"]:not([class*="mm-"]):not(.ui-button):disabled,
input[type="button"]:not([class*="mm-"]):not(.ui-button):disabled,
input[type="reset"]:not([class*="mm-"]):not(.ui-button):disabled {
    background: var(--mm-surface-2);
    border-color: var(--mm-line);
    color: var(--mm-ink-500);
    cursor: not-allowed;
}

/*
 * Zustandsplakette. Dieselbe Gestalt wie im Adminswitcher, damit "Aktiv"
 * ueberall gleich aussieht. Die Klickvariante traegt einen Verweis: ein
 * Klick schaltet den Zustand um, was vorher ein zweites Symbol in der
 * Aktionsspalte tat.
 */
.mm-lage {
    display: inline-block;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 11px;
    white-space: nowrap;
}
.mm-lage.ist-an  { background: var(--mm-ok-bg);  color: var(--mm-ok); }
.mm-lage.ist-aus { background: var(--mm-err-bg); color: var(--mm-err); }
.mm-lage.ist-hinweis { background: var(--mm-blue-100); color: var(--mm-blue-800); }
/* Neutrale Kennzeichnung ohne Wertung - z.B. Kampagnentyp oder Waehlmethode
   in der Kampagnenliste. Weder "gut/an" noch "schlecht/aus", nur Info. */
.mm-lage.ist-neutral { background: var(--mm-surface-2); color: var(--mm-ink-500); border: 1px solid var(--mm-line); padding: 4px 10px; }

a.mm-lage { text-decoration: none; cursor: pointer; }
a.mm-lage:hover {
    text-decoration: none;
    box-shadow: inset 0 0 0 1px currentColor;
}
a.mm-lage:focus-visible { outline: 2px solid var(--mm-blue-500); outline-offset: 1px; }

/* Breite Tabellen duerfen scrollen statt das Layout zu sprengen */
.mm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

input[type=text], input[type=password], input[type=number],
input[type=date], input[type=email], select, textarea {
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    color: var(--mm-ink-700);
    padding: 6px 9px;
    font-size: 13.5px;
    font-family: inherit;
    max-width: 100%;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus,
input[type=date]:focus, input[type=email]:focus, select:focus, textarea:focus {
    outline: 0;
    border-color: var(--mm-blue-500);
    box-shadow: 0 0 0 3px rgba(45, 139, 255, .15);
}

/* Radiale Fortschrittsanzeige auf der Startseite.
   Der Prozentwert kommt als --mm-p direkt aus der Vorlage. Vorher lag fuer
   jeden einzelnen Wert eine eigene Klasse mit zwei ineinandergelegten
   linear-gradient in style3.css - 434 Zeilen, um eine Zahl darzustellen. */
.progress-radial {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: conic-gradient(var(--mm-blue-700) calc(var(--mm-p, 0) * 1%), var(--mm-surface-2) 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
}
.progress-radial .overlay {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--mm-ink-900);
}

/* Datums- und Zeitfelder.
   Im Bestand stand an einem Dutzend Stellen ".timepicker {width: 40px}"
   in einem style-Block der jeweiligen Seite. Mit dem Innenabstand der
   neuen Formularfelder passt "23:59" da nicht mehr hinein. Die Breiten
   stehen deshalb einmal hier - in em, damit sie der Schriftgroesse
   folgen. */
input.datepicker { width: 8.5em; }
input.timepicker { width: 5em; text-align: center; }

/* Suchformulare.
   Der Bestand reiht Felder mit <br /> und Leerzeichen aneinander. Diese
   Klasse macht daraus eine Karte mit sauberen Zeilen, ohne dass das
   Markup umgebaut werden muss. */
.mm-suchform {
    background: var(--mm-surface-2);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    padding: 14px 16px;
    margin: 0 0 16px;
    max-width: 100%;
}
.mm-suchform-titel {
    font-size: 13px;
    font-weight: 600;
    color: var(--mm-ink-900);
    margin: 0 0 10px;
}
.mm-suchzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
}
.mm-suchzeile + .mm-suchzeile { margin-top: 12px; }

.mm-feld {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mm-feld > label {
    font-size: 12px;
    font-weight: 500;
    color: var(--mm-ink-500);
}
/* Feldgruppe, die zusammengehoert - etwa Datum und Uhrzeit */
.mm-feld-paar { display: flex; gap: 6px; align-items: center; }
.mm-feld-paar .mm-bis { color: var(--mm-ink-500); font-size: 13px; padding: 0 2px; }

.mm-suchform input[type=submit],
.mm-suchform button {
    background: var(--mm-blue-700);
    border: 1px solid var(--mm-blue-700);
    border-radius: var(--mm-radius-sm);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    padding: 7px 16px;
}
.mm-suchform input[type=submit]:hover,
.mm-suchform button:hover { background: var(--mm-blue-800); border-color: var(--mm-blue-800); }

@media (max-width: 575.98px) {
    /* Auf schmalen Geraeten steht jedes Feld fuer sich */
    .mm-suchzeile { flex-direction: column; align-items: stretch; }
    .mm-suchform input[type=text], .mm-suchform select { width: 100%; }
    input.datepicker, input.timepicker { width: auto; }
}

/* Theme-Umschalter in der Topbar.
   Zeigt das Symbol dessen, was ein Klick bewirkt: im hellen Design den
   Mond, im dunklen die Sonne. Ohne Maskenunterstuetzung bleibt die
   Beschriftung stehen, damit der Knopf bedienbar ist. */
/* ======================================================================
   Sprachwahl in der Kopfleiste

   Sie steht nur da, wenn es mehr als eine Sprache gibt - erzeugt wird sie
   in Lang::umschalter(). Bis zu drei Sprachen als Knopfreihe mit den
   Kuerzeln, darueber als Auswahlfeld.

   Die Farben folgen dem Design-Umschalter daneben: helle Schrift auf der
   dunklen Leiste, Rahmen aus durchscheinendem Weiss. Deshalb hier feste
   Werte statt der Token - die gelten fuer den Seiteninhalt, nicht fuer
   die Kopfleiste.
   ====================================================================== */
.mm-sprachwahl {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--mm-radius-sm);
    overflow: hidden;
    height: 30px;
}
.mm-sprachwahl a {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 9px;
    color: #DCEBF8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
}
.mm-sprachwahl a + a { border-left: 1px solid rgba(255, 255, 255, .25); }
.mm-sprachwahl a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Die aktive Sprache ist gefuellt, nicht nur fett: auf der dunklen
   Leiste ist ein Fettunterschied bei zwei Zeichen kaum zu sehen. */
.mm-sprachwahl a.active {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    cursor: default;
}

.mm-sprachwahl--liste { border: 0; }
.mm-sprachwahl select {
    height: 30px;
    padding: 0 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--mm-radius-sm);
    color: #DCEBF8;
    font-family: inherit;
    font-size: 12px;
}
/* Die Liste selbst zeichnet das Betriebssystem - dort waere helle Schrift
   auf hellem Grund. */
.mm-sprachwahl select option { color: var(--mm-ink-900); background: #fff; }

/* Nur fuer Vorleseprogramme. */
.mm-nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Auf schmalen Geraeten ist die Kopfleiste knapp. Die Sprachwahl bleibt -
   sie ist der einzige Weg zurueck, wenn jemand versehentlich umgestellt
   hat -, wird aber schmaler. */
@media (max-width: 600px) {
    .mm-sprachwahl a { padding: 0 6px; font-size: 11px; }
}

.mm-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--mm-radius-sm);
    color: #DCEBF8;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
}
.mm-theme-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }

@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .mm-theme-toggle { width: 30px; padding: 0; }
    .mm-theme-toggle > span { display: none; }
    .mm-theme-toggle::before {
        content: "";
        width: 17px;
        height: 17px;
        background-color: currentColor;
        -webkit-mask: var(--mm-icon-mond) no-repeat center / contain;
        mask: var(--mm-icon-mond) no-repeat center / contain;
    }
    [data-theme="dark"] .mm-theme-toggle::before {
        -webkit-mask-image: var(--mm-icon-sonne);
        mask-image: var(--mm-icon-sonne);
    }
}

/* Seitenleiste ausgeblendet (Leadmanagement-Ansicht). Die Listen dort sind
   breit und brauchen den Platz; das Menue kommt per Knopf zurueck. */
body.mm-menu-off #menu-left { display: none; }

/* Umschalter fuer die Navigation auf schmalen Geraeten */
.mm-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--mm-radius-sm);
    color: #DCEBF8;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 6px 10px;
}

/* --------------------------------------------------------------------------
   Kennzahlen der Live-Ansicht

   Drei kleine Saeulendiagramme fuer die Fenster 60, 30, 5 und 1 Minute.
   Die Saeulen wachsen von unten, der Wert steht darueber, das Zeitfenster
   darunter - vorher war es umgekehrt gezeichnet und die Beschriftung um
   90 Grad gedreht.
   -------------------------------------------------------------------------- */

/* Die Kennzahlen stehen innerhalb eines jQuery-UI-Widgets, und die
   Reboot-Korrektur weiter oben setzt dort alles auf content-box. Damit
   zaehlten Innenabstand und Rahmen zur Breite hinzu und die dritte Kachel
   rutschte in eine zweite Zeile. Hier gilt wieder border-box. */
.mm-kennzahlen,
.mm-kennzahlen * { box-sizing: border-box; }

.mm-kennzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
    padding: 4px 0;
}
.mm-kennzahl-karte {
    flex: 1 1 190px;
    min-width: 0;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    padding: 12px 14px;
}
.mm-kennzahl-titel {
    font-size: 13px;
    font-weight: 600;
    color: var(--mm-ink-900);
    margin: 0 0 10px;
    border: 0;
    padding: 0;
}
.mm-kennzahl-fuss {
    font-size: 11.5px;
    color: var(--mm-ink-500);
    margin: 8px 0 0;
}

.mm-kennzahl {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    height: 108px;
}
.mm-saeule {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.mm-saeule-wert {
    font-size: 12px;
    font-weight: 600;
    color: var(--mm-ink-900);
    line-height: 1.3;
    margin-bottom: 3px;
    white-space: nowrap;
}
/* Der Schaft nimmt die verbleibende Hoehe, die Fuellung waechst darin von
   unten.

   Die Fuellung ist absolut gesetzt, nicht als Flex-Element mit
   align-items: flex-end. Grund: die Hoehe des Schafts entsteht aus der
   Flex-Verteilung und gilt damit fuer die Aufloesung von Prozentangaben
   als unbestimmt - die Fuellung bekam so statt 83% von 72px am Ende 83%
   von 1,7px, also einen Strich. Gegen einen positionierten Vorfahren
   loesen Prozente dagegen zuverlaessig auf. */
.mm-saeule-schaft {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    background: var(--mm-surface-2);
    border-radius: 3px;
    overflow: hidden;
}
.mm-saeule-fuellung {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2%;
    background: var(--mm-blue-500);
    border-radius: 3px 3px 0 0;
    transition: height .3s ease;
}
.mm-saeule-marke {
    font-size: 10.5px;
    color: var(--mm-ink-500);
    margin-top: 4px;
    white-space: nowrap;
}

/* Je nach Bedeutung: bei der Erreichbarkeit ist viel gut, beim Verlust
   ist viel schlecht. */
.mm-kennzahl--gut .mm-saeule-fuellung { background: var(--mm-ok); }
.mm-kennzahl--schlecht .mm-saeule-fuellung { background: var(--mm-err); }

/* --------------------------------------------------------------------------
   Formularkarten

   Fuer Seiten, deren Formulare bisher als lose Folge von Beschriftung,
   <br /> und Feld untereinander standen - Listenverwaltung, DNC-Import.
   -------------------------------------------------------------------------- */

.mm-formkarten {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.mm-formkarte {
    flex: 1 1 340px;
    min-width: 0;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    padding: 16px;
}
/* Karte mit ungewoehnlich vielen Feldern (z.B. Anrufbeantworter-Erkennung
   mit zwei Engine-Varianten) - nimmt die volle Zeilenbreite statt sich die
   Zeile mit den schmaleren Nachbarkarten zu teilen. */
.mm-formkarte--breit { flex-basis: 100%; }
.mm-formkarte-titel {
    font-size: 15px;
    font-weight: 600;
    color: var(--mm-ink-900);
    margin: 0 0 14px;
    padding: 0 0 10px;
    border: 0;
    border-bottom: 1px solid var(--mm-line);
}
.mm-formkarte-hinweis { color: var(--mm-ink-500); font-size: 12.5px; margin: 10px 0 0; }

/* Markierung fuer Einstellungen, die nur Superadministratoren sehen oder
   aendern koennen - z.B. im Kampagnen-Editor. Warnfarbe statt Blau, damit
   sie sich klar von normalen Karten/Feldern abhebt, aber nicht wie ein
   Fehler wirkt. */
.mm-nur-admin {
    position: relative;
    background: var(--mm-warn-bg);
    border: 1px solid var(--mm-warn);
    border-left-width: 3px;
    border-radius: var(--mm-radius-sm);
    padding: 12px 14px;
    margin: 0 0 14px;
}
.mm-nur-admin:last-child { margin-bottom: 0; }
.mm-nur-admin > .mm-feld:last-child,
.mm-nur-admin > *:last-child { margin-bottom: 0; }
.mm-nur-admin-marke {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--mm-warn);
    margin: 0 0 8px;
}
/* Formkarte, die komplett nur fuer Superadmins gedacht ist */
.mm-formkarte.mm-nur-admin { padding: 16px; }
.mm-formkarte.mm-nur-admin .mm-formkarte-titel { border-bottom-color: var(--mm-warn); }

.mm-feld { margin-bottom: 12px; }
.mm-feld > label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mm-ink-500);
    margin-bottom: 4px;
}
.mm-feld input[type=text],
.mm-feld input[type=number],
.mm-feld input[type=password],
.mm-feld input[type=email],
.mm-feld input[type=date],
.mm-feld select,
.mm-feld textarea {
    width: 100%;
    max-width: 100%;
}

/* Liste einzeln editierbarer Werte, die im Hintergrund als ein getrennter
   String gespeichert werden (z.B. mehrere feste Voices bei regelbasierten
   KI-Kampagnen, intern mit | verbunden). */
.mm-voice-liste { margin-bottom: 8px; }
.mm-voice-zeile {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.mm-voice-zeile input[type=text] { flex: 1 1 auto; }

.mm-feld-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
}
.mm-feld-zusatz { font-size: 12px; color: var(--mm-ink-500); margin: 5px 0 0; }

/* Ankreuzfeld mit Beschriftung daneben statt darueber */
.mm-feld--schalter > label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 400;
    font-size: 13.5px;
    color: var(--mm-ink-700);
    cursor: pointer;
    margin: 0;
}
.mm-feld--schalter input[type=checkbox] { margin: 0; }

/* Suchzeile: Felder nebeneinander, das Suchfeld nimmt den Rest */
.mm-suchkarte { flex-basis: 100%; }
.mm-suchzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.mm-suchzeile .mm-feld { margin-bottom: 0; flex: 0 1 200px; }
.mm-suchzeile .mm-feld--breit { flex: 1 1 260px; }
.mm-suchzeile .mm-feld-aktionen { margin-top: 0; }

/* Mehrere gleichartige Formulare nebeneinander, etwa die
   Listen-Operationen. Ohne feste Spaltenzahl, damit sie sich der Breite
   anpassen. */
.mm-formkarten--spalten .mm-formkarte { flex: 1 1 300px; }

.mm-hinweis-oben {
    background: var(--mm-blue-050);
    border: 1px solid var(--mm-blue-500);
    border-radius: var(--mm-radius-sm);
    color: var(--mm-blue-800);
    font-size: 13px;
    margin: 0 0 16px;
    padding: 10px 14px;
}

/* Knopf in Markenfarbe, auch fuer input[type=submit] und Verweise */
.mm-knopf {
    display: inline-block;
    background: var(--mm-blue-700);
    border: 1px solid var(--mm-blue-700);
    border-radius: var(--mm-radius-sm);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 16px;
    text-decoration: none;
}
.mm-knopf:hover { background: var(--mm-blue-800); border-color: var(--mm-blue-800); color: #fff; text-decoration: none; }
.mm-knopf--still {
    background: var(--mm-surface);
    border-color: var(--mm-line);
    color: var(--mm-ink-700);
}
.mm-knopf--still:hover { background: var(--mm-blue-050); border-color: var(--mm-blue-500); color: var(--mm-blue-800); }

/* --------------------------------------------------------------------------
   Dateiablage (Leadmanager)

   Ordnerbaum und Ablagebereich stehen nebeneinander und brechen auf
   schmalen Fenstern untereinander. Vorher lagen beide als float mit festen
   Pixelmassen nebeneinander, der Ablagebereich war 50 mal 50 Pixel gross.
   -------------------------------------------------------------------------- */

.mm-medien {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 16px;
}
.mm-medien-baum {
    flex: 1 1 300px;
    min-width: 0;
    max-height: 260px;
    overflow: auto;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    padding: 8px;
}

.mm-upload { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; }

.mm-upload-zone {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 150px;
    padding: 18px;
    text-align: center;
    background: var(--mm-surface-2);
    border: 2px dashed var(--mm-line);
    border-radius: var(--mm-radius);
    color: var(--mm-ink-500);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.mm-upload-zone:hover,
.mm-upload-zone:focus {
    background: var(--mm-blue-050);
    border-color: var(--mm-blue-500);
    color: var(--mm-blue-800);
    outline: none;
}
/* waehrend eine Datei ueber dem Bereich schwebt */
.mm-upload-zone.ist-bereit {
    background: var(--mm-blue-100);
    border-color: var(--mm-blue-700);
    border-style: solid;
    color: var(--mm-blue-800);
}

.mm-upload-symbol {
    width: 34px;
    height: 34px;
    background-color: currentColor;
    opacity: .75;
}
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .mm-upload-symbol {
        -webkit-mask: var(--mm-icon-upload) no-repeat center / contain;
        mask: var(--mm-icon-upload) no-repeat center / contain;
    }
}

.mm-upload-text { margin: 0; font-size: 13.5px; line-height: 1.5; }
.mm-upload-text strong { color: var(--mm-ink-900); font-weight: 600; }
.mm-upload-zone:hover .mm-upload-text strong,
.mm-upload-zone.ist-bereit .mm-upload-text strong { color: inherit; }
.mm-upload-link { color: var(--mm-blue-700); text-decoration: underline; }

.mm-upload-ziel {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--mm-ink-500);
}
.mm-upload-ziel .target_folder {
    font-weight: 600;
    color: var(--mm-ink-900);
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: 4px;
    padding: 1px 6px;
}

.mm-upload-hinweis { margin: 6px 0 0; font-size: 12px; color: var(--mm-ink-500); }

/* Variante, die ein vorhandenes Formularfeld aufruestet: sie steht in
   einem Formular und braucht deshalb keine eigene Spaltenbreite. */
.mm-upload--feld { flex: none; width: 100%; max-width: 520px; }
.mm-upload--feld .mm-upload-zone { min-height: 120px; }
.mm-upload-feld-versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* sobald eine Datei gewaehlt ist, tritt die Flaeche zurueck */
.mm-upload-zone.ist-belegt {
    min-height: 84px;
    background: var(--mm-surface);
    border-style: solid;
    border-color: var(--mm-line);
}

.mm-upload-fuss { border: 0; background: none; padding: 4px 0 0; display: block; }
.mm-upload-entfernen {
    background: none;
    border: 0;
    padding: 0;
    color: var(--mm-blue-700);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.mm-upload-entfernen:hover { color: var(--mm-blue-800); }

/* Liste der uebertragenen Dateien */
.mm-upload-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.mm-upload-eintrag {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name groesse" "balken balken" "lage lage";
    gap: 2px 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-left: 3px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    font-size: 13px;
}
.mm-upload-name {
    grid-area: name;
    color: var(--mm-ink-900);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mm-upload-groesse { grid-area: groesse; color: var(--mm-ink-500); font-size: 12px; }
.mm-upload-lage { grid-area: lage; font-size: 12px; color: var(--mm-ink-500); }

.mm-upload-balken {
    grid-area: balken;
    height: 5px;
    margin: 4px 0 2px;
    background: var(--mm-surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.mm-upload-balken-wert {
    height: 100%;
    width: 0;
    background: var(--mm-blue-500);
    border-radius: 999px;
    transition: width .2s ease;
}

.mm-upload-eintrag.ist-laeuft { border-left-color: var(--mm-blue-500); }
.mm-upload-eintrag.ist-fertig { border-left-color: var(--mm-ok); }
.mm-upload-eintrag.ist-fertig .mm-upload-lage { color: var(--mm-ok); }
.mm-upload-eintrag.ist-fertig .mm-upload-balken-wert { background: var(--mm-ok); }
.mm-upload-eintrag.ist-fehler { border-left-color: var(--mm-err); }
.mm-upload-eintrag.ist-fehler .mm-upload-lage { color: var(--mm-err); }
.mm-upload-eintrag.ist-fehler .mm-upload-balken { display: none; }

/* --------------------------------------------------------------------------
   Adminswitcher

   Die Oberflaeche hatte gar kein eigenes Design: nackte Links, dazwischen
   ein <hr />, und als einziges Stylesheet das cupertino-Thema von
   jQuery UI 1.8. Sie nutzt jetzt dieselbe Shell wie die uebrigen Apps.
   -------------------------------------------------------------------------- */

/* Bereichsname neben dem Logo, damit erkennbar bleibt, wo man ist */
.mm-bereich {
    color: #DCEBF8;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    margin-right: auto;
    padding-left: 12px;
    opacity: .85;
}

/* Diagnoseleiste. Steht oben, direkt unter der Navigation, weil sie noch
   vor dem Verbindungsaufbau ausgegeben wird - siehe kopf.inc.php. Sie ist
   schmal genug, um dort nicht zu stoeren. */
.mm-diagnose {
    background: var(--mm-surface-2);
    border-bottom: 1px solid var(--mm-line);
    font-size: 12px;
}
.mm-diagnose-leiste {
    max-width: 1600px;
    margin: 0 auto;
    padding: 6px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}
.mm-diagnose-wert {
    color: var(--mm-ink-700);
    font-family: ui-monospace, Consolas, monospace;
    white-space: nowrap;
}
.mm-diagnose-marke {
    color: var(--mm-ink-500);
    font-family: var(--mm-font);
    margin-right: 5px;
}
.mm-diagnose-wert.ist-warnung { color: var(--mm-err); font-weight: 600; }

.mm-diagnose-schalter {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    color: var(--mm-ink-500);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    padding: 3px 10px;
}
.mm-diagnose-schalter:hover {
    background: var(--mm-surface);
    border-color: var(--mm-blue-500);
    color: var(--mm-blue-700);
}
.mm-diagnose-schalter::after {
    content: "";
    width: 11px;
    height: 11px;
    background-color: currentColor;
    transition: transform .15s ease;
}
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .mm-diagnose-schalter::after {
        -webkit-mask: var(--mm-icon-chevron) no-repeat center / contain;
        mask: var(--mm-icon-chevron) no-repeat center / contain;
    }
}
.mm-diagnose-schalter[aria-expanded="true"]::after { transform: rotate(90deg); }

.mm-diagnose-test { max-width: 1600px; margin: 0 auto; padding: 0 14px 12px; }
.mm-diagnose-test[hidden] { display: none; }
.mm-diagnose-test iframe {
    width: 100%;
    height: 300px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
}

/* Knopf zum Kopieren, sitzt in der Zelle neben dem Wert */
.mm-kopieren {
    width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    background: transparent;
    border: 1px solid var(--mm-line);
    border-radius: 4px;
    color: var(--mm-ink-500);
    cursor: pointer;
}
.mm-kopieren:hover { background: var(--mm-blue-050); border-color: var(--mm-blue-500); color: var(--mm-blue-700); }
.mm-kopieren.ist-kopiert { background: var(--mm-ok-bg); border-color: var(--mm-ok); color: var(--mm-ok); }
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .mm-kopieren::before {
        content: "";
        display: block;
        width: 13px;
        height: 13px;
        margin: 0 auto;
        background-color: currentColor;
        -webkit-mask: var(--mm-icon-kopieren) no-repeat center / contain;
        mask: var(--mm-icon-kopieren) no-repeat center / contain;
    }
    .mm-kopieren.ist-kopiert::before {
        -webkit-mask-image: var(--mm-icon-haken);
        mask-image: var(--mm-icon-haken);
    }
}
/* Ohne Maskenunterstuetzung wenigstens ein Zeichen im Knopf */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
    .mm-kopieren::before { content: "98"; }
}
/* Die Serverlisten sind sehr breit und werden per Rechtsklick bedient -
   eine hervorgehobene Zeile hilft beim Wiederfinden. */
.mm-adminswitcher tbody tr.highlight td { background: var(--mm-blue-100); }

/* --------------------------------------------------------------------------
   Live-Ansicht

   Die Seite hat drei Ebenen: eine Kopfzeile mit Kampagnenauswahl, Takt und
   Ansichtsumschalter, darunter acht Kennzahlen, darunter je nach Ansicht
   die Agentenliste, die Diagramme oder beides.

   Die Zeilenfarben der Agententabelle lagen doppelt in style3.css von
   customer-admin und mini-admin. Sie stehen jetzt hier, weil die
   Farbleiste ueber der Tabelle dieselben Werte braucht - eine Legende,
   die nicht genau so aussieht wie die Zeilen, erklaert nichts.

   Die Farben bleiben, wie sie waren: kraeftig, weil diese Tabelle im
   Betrieb aus mehreren Metern Abstand gelesen wird. Angeglichen wurden
   nur die drei grellsten Toene (Reinrot und Giftgruen) an die
   Nachbarwerte derselben Reihe.
   -------------------------------------------------------------------------- */

:root {
    --mm-live-wait-1:   #ADD8E6;
    --mm-live-wait-2:   #10BDEF;
    --mm-live-wait-3:   #00738F;   /* etwas dunkler als das alte #0091BB, damit die weisse Schrift darauf lesbar ist */
    --mm-live-incall-1: #A0DA87;
    --mm-live-incall-2: #7ACF54;
    --mm-live-incall-3: #4CBE1E;
    --mm-live-pause-1:  #E09B9B;
    --mm-live-pause-2:  #D64040;
    --mm-live-pause-3:  #B01414;
}

tr.waitlow td   { background-color: var(--mm-live-wait-1); color: #14202B; }
tr.waitmid td   { background-color: var(--mm-live-wait-2); color: #14202B; }
tr.waitlong td  { background-color: var(--mm-live-wait-3); color: #fff !important; font-weight: bold; }

tr.incalllow td  { background-color: var(--mm-live-incall-1); color: #14202B; }
tr.incallmid td  { background-color: var(--mm-live-incall-2); color: #14202B; }
tr.incalllong td { background-color: var(--mm-live-incall-3); color: #14202B; font-weight: bold; }

tr.pauselow td  { background-color: var(--mm-live-pause-1); color: #14202B; }
tr.pausemid td  { background-color: var(--mm-live-pause-2); color: #fff !important; }
tr.pauselong td { background-color: var(--mm-live-pause-3); color: #fff !important; font-weight: bold; }

.mm-live, .mm-live * { box-sizing: border-box; }

.mm-live-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 12px 14px;
    margin: 0 0 14px;
    background: var(--mm-surface-2);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
}

.mm-live-kampagne { flex: 1 1 260px; margin: 0; min-width: 0; }
.mm-live-kampagne-link { display: inline-block; font-size: 12.5px; margin-top: 5px; }
.mm-live-kampagne > label {
    display: block;
    color: var(--mm-ink-500);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.mm-live-kampagne select {
    width: 100%;
    max-width: 520px;
    padding: 8px 10px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    color: var(--mm-ink-900);
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
}

/* Segmentierter Umschalter. Ein Knopf, kein Reiter: die Ansicht wechselt
   sofort und laedt die Seite nicht neu. */
.mm-live-ansicht {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
}
.mm-live-ansicht-knopf {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--mm-ink-500);
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    padding: 6px 14px;
}
.mm-live-ansicht-knopf:hover { color: var(--mm-blue-700); background: var(--mm-blue-050); }
.mm-live-ansicht-knopf.ist-aktiv {
    background: var(--mm-blue-700);
    color: #fff;
    font-weight: 600;
}

/* Die Uhrzeit darf umbrechen statt aus dem Kasten zu laufen. Vorher war
   die Gruppe starr (flex: 0 0 auto) und die Uhrzeit auf nowrap - wurde
   das Fenster schmaler, schob sie sich nach rechts aus dem Sichtfeld. */
.mm-live-takt {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    margin-left: auto;
}
.mm-live-pause {
    appearance: none;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    color: var(--mm-ink-700);
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    padding: 6px 14px;
    white-space: nowrap;
}
.mm-live-pause:hover { border-color: var(--mm-blue-500); color: var(--mm-blue-700); }
.mm-live-pause[aria-pressed="true"] {
    background: var(--mm-warn-bg);
    border-color: var(--mm-warn);
    color: var(--mm-warn);
    font-weight: 600;
}

.mm-live-regler { flex: 0 0 160px; }
.mm-live-regler > label {
    display: block;
    color: var(--mm-ink-500);
    font-size: 12px;
    margin: 0 0 6px;
    white-space: nowrap;
}
.mm-live-regler > label span { color: var(--mm-ink-900); font-weight: 600; }
.mm-live-regler .ui-slider { margin: 0; }

.mm-live-stand {
    flex: 0 0 auto;
    color: var(--mm-ink-500);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Angehalten: die Uhrzeit gilt nicht mehr fuer "jetzt" */
.mm-live.ist-angehalten .mm-live-stand { color: var(--mm-warn); font-weight: 600; }

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

/* Zwoelf Kacheln, und die Spaltenzahl muss aufgehen - sonst steht die
   letzte allein in einer angebrochenen Reihe. Deshalb feste Stufen statt
   auto-fit: sechs mal zwei auf breiten Schirmen, sonst vier mal drei,
   auf dem Telefon zwei je Reihe. */
.mm-live-zahlen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}
@media (min-width: 1500px) {
    .mm-live-zahlen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Die vier Kacheln zur Kampagne selbst - Waehllevel, Takt,
   Zwischenspeicher, Verlust - bekommen eine Kante in der Primaerfarbe.
   Sie gehoeren zusammen und verhalten sich anders als der Rest: sie sind
   teilweise bedienbar und gelten nur fuer eine einzelne Kampagne. */
.mm-live-kachel--kampagne { border-left: 3px solid var(--mm-blue-500); }

.mm-live-kachel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2px;
    min-height: 112px;
    padding: 12px 14px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow);
    min-width: 0;
}
.mm-live-kachel-titel {
    color: var(--mm-ink-500);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.mm-live-kachel-wert {
    color: var(--mm-ink-900);
    font-size: 30px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.mm-live-kachel-fuss {
    color: var(--mm-ink-500);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mm-live-kachel-fuss strong { color: var(--mm-ink-700); font-variant-numeric: tabular-nums; }
.mm-live-kachel-fuss a { text-decoration: underline; }

/* Das Waehllevel ist der einzige Wert, den man hier direkt aendert. Das
   Auswahlfeld steht deshalb an der Stelle der grossen Zahl und ist auch
   so gross - es soll nicht wie eine Fussnote aussehen. */
.mm-live-kachel select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    color: var(--mm-ink-900);
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.mm-live-kachel select:hover { border-color: var(--mm-blue-500); }

/* Wartende Anrufer sind der Zustand, den niemand haben will - die Kachel
   faerbt sich, sobald die Zahl ueber null steht. */
.mm-live-kachel--warnbar.ist-warnung {
    background: var(--mm-err-bg);
    border-color: var(--mm-err);
}
.mm-live-kachel--warnbar.ist-warnung .mm-live-kachel-wert,
.mm-live-kachel--warnbar.ist-warnung .mm-live-kachel-titel { color: var(--mm-err); }

.mm-live-stapel {
    display: flex;
    height: 6px;
    margin: 6px 0 4px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--mm-surface-2);
}
.mm-live-stapel-teil { transition: width .4s ease; }
.mm-live-stapel--incall { background: var(--mm-ok); }
.mm-live-stapel--ready  { background: var(--mm-blue-500); }
.mm-live-stapel--pause  { background: var(--mm-err); }

/* ----- Ueberblick ----- */

/* Der Verlauf steht als Zeitreihe ueber die volle Breite, darunter die
   drei Momentaufnahmen nebeneinander. */
.mm-live-karten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}
.mm-live-karte {
    padding: 14px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow);
    min-width: 0;
}
.mm-live-karte--breit { grid-column: 1 / -1; }
/* Feste Hoehe, damit die drei Diagramme darunter auf einer Linie
   beginnen - eine der Ueberschriften laeuft ueber zwei Zeilen. */
.mm-live-karte-titel {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    min-height: 2.6em;
}
.mm-live-karte-zusatz { color: var(--mm-ink-500); font-size: 12.5px; font-weight: 400; }
.mm-live-chart { height: 240px; }

/* ----- Einklappbarer Block ----- */

/* Mit <details>/<summary> statt einer Ziehharmonika von jQuery UI: das
   Auf- und Zuklappen kann der Browser selbst, die Seite braucht dafuer
   kein Skript und der Zustand ist auch ohne JavaScript bedienbar. */
.mm-klapp {
    margin: 0 0 16px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    background: var(--mm-surface);
    box-shadow: var(--mm-shadow);
}
.mm-klapp-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;          /* Firefox zeigt sonst ein eigenes Dreieck */
    user-select: none;
}
.mm-klapp-kopf::-webkit-details-marker { display: none; }
.mm-klapp-kopf:hover .mm-klapp-titel { color: var(--mm-blue-700); }
.mm-klapp-kopf:focus-visible { outline: 2px solid var(--mm-blue-500); outline-offset: -2px; }

.mm-klapp-titel {
    color: var(--mm-ink-900);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.mm-klapp-kurz {
    color: var(--mm-ink-500);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .mm-klapp-kopf::before {
        content: "";
        flex: 0 0 auto;
        width: 13px;
        height: 13px;
        align-self: center;
        background-color: var(--mm-ink-500);
        -webkit-mask: var(--mm-icon-chevron) no-repeat center / contain;
        mask: var(--mm-icon-chevron) no-repeat center / contain;
        transition: transform .15s ease;
    }
    .mm-klapp[open] > .mm-klapp-kopf::before { transform: rotate(90deg); }
}

/* Der Inhalt bringt seinen eigenen Abstand mit, der Rahmen soll ihn
   nicht doppelt haben. */
.mm-klapp > .mm-kennzahlen { margin: 0; padding: 0 14px 14px; }

/* ----- Zeichen in der Agentenliste ----- */

/* Ein Symbol in Schriftgroesse, das mitten im Text stehen kann. Es faerbt
   sich in der Schriftfarbe der Zeile und ist damit auf jeder der neun
   Zeilenfarben lesbar. */
.mm-zeichen {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-left: 5px;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask: var(--mm-icon) no-repeat center / contain;
    mask: var(--mm-icon) no-repeat center / contain;
}
/* Ohne Maskenunterstuetzung bliebe ein ausgefuelltes Quadrat stehen */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
    .mm-zeichen { display: none; }
}
/* Dasselbe gilt, wenn die Symbolklasse fehlt: --mm-icon ist dann nicht
   gesetzt, die Maske greift nicht, und uebrig bliebe die eingefaerbte
   Flaeche - ein schwarzes Quadrat. */
.mm-zeichen:not([class*="mm-i-"]) { display: none; }
/* Der ausgefallene Rechner soll auffallen, ohne eine eigene Farbe zu
   brauchen - auf der roten Pausezeile waere Rot unsichtbar. */
.mm-zeichen--alarm { animation: mm-live-blinken 1.2s ease-in-out infinite; }
@keyframes mm-live-blinken {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
    .mm-zeichen--alarm { animation: none; }
}

/* ----- Agentenliste ----- */

.mm-live-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
}
.mm-live-chip {
    border-radius: 999px;
    color: #14202B;
    font-size: 12px;
    line-height: 1;
    padding: 5px 11px;
    white-space: nowrap;
}
.mm-live-chip.waitlow    { background: var(--mm-live-wait-1); }
.mm-live-chip.waitmid    { background: var(--mm-live-wait-2); }
.mm-live-chip.waitlong   { background: var(--mm-live-wait-3); color: #fff; font-weight: 600; }
.mm-live-chip.incalllow  { background: var(--mm-live-incall-1); }
.mm-live-chip.incallmid  { background: var(--mm-live-incall-2); }
.mm-live-chip.incalllong { background: var(--mm-live-incall-3); font-weight: 600; }
.mm-live-chip.pauselow   { background: var(--mm-live-pause-1); }
.mm-live-chip.pausemid   { background: var(--mm-live-pause-2); color: #fff; }
.mm-live-chip.pauselong  { background: var(--mm-live-pause-3); color: #fff; font-weight: 600; }
.mm-live-legende-trenner {
    width: 1px;
    height: 16px;
    margin: 0 4px;
    background: var(--mm-line);
}
.mm-live-ausklinken { margin-left: auto; }

/* ----- Kampagneneinstellungen ----- */

.mm-live-einstellungen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.mm-live-wert {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--mm-surface-2);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    min-width: 0;
}
.mm-live-wert--breit { grid-column: 1 / -1; }
.mm-live-wert-titel {
    color: var(--mm-ink-500);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.mm-live-wert-zahl {
    color: var(--mm-ink-900);
    font-size: 19px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mm-live-wert-text { color: var(--mm-ink-900); font-size: 14px; word-break: break-word; }
.mm-live-wert-link { font-size: 12.5px; }
.mm-live-wert select {
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    color: var(--mm-ink-900);
}
.mm-live-wert button {
    appearance: none;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    color: var(--mm-blue-700);
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    padding: 4px 10px;
}
.mm-live-wert button:hover { border-color: var(--mm-blue-500); background: var(--mm-blue-050); }

/* --------------------------------------------------------------------------
   Durchsuchbares Auswahlfeld (mmdial-suchauswahl.js)
   -------------------------------------------------------------------------- */

.mm-suchauswahl { position: relative; display: block; }
.mm-suchauswahl-versteckt {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.mm-suchauswahl-knopf {
    display: block;
    width: 100%;
    text-align: left;
    appearance: none;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    color: var(--mm-ink-900);
    cursor: pointer;
    font: inherit;
    padding: 8px 30px 8px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mm-suchauswahl-knopf.ist-leer { color: var(--mm-ink-500); }
.mm-suchauswahl-knopf:hover { border-color: var(--mm-blue-500); }
.mm-suchauswahl-knopf:focus {
    outline: 2px solid var(--mm-blue-500);
    outline-offset: 1px;
}
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .mm-suchauswahl-knopf::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 14px;
        height: 14px;
        margin-top: -7px;
        background-color: var(--mm-ink-500);
        -webkit-mask: var(--mm-icon-chevron) no-repeat center / contain;
        mask: var(--mm-icon-chevron) no-repeat center / contain;
        transform: rotate(90deg);
    }
    .mm-suchauswahl.ist-offen .mm-suchauswahl-knopf::after { transform: rotate(-90deg); }
}

.mm-suchauswahl-panel {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 3px);
    padding: 8px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow-lg);
}
.mm-suchauswahl-panel[hidden] { display: none; }

.mm-suchauswahl-feld {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    color: var(--mm-ink-900);
    font: inherit;
}
.mm-suchauswahl-feld:focus { outline: 2px solid var(--mm-blue-500); outline-offset: 1px; }

.mm-suchauswahl-liste {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
    position: relative;
}
.mm-suchauswahl-gruppe {
    color: var(--mm-ink-500);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 8px 8px 4px;
}
.mm-suchauswahl-eintrag {
    border-radius: var(--mm-radius-sm);
    cursor: pointer;
    padding: 7px 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mm-suchauswahl-eintrag.ist-aktiv { background: var(--mm-blue-050); color: var(--mm-blue-800); }
.mm-suchauswahl-eintrag.ist-gewaehlt { font-weight: 600; }
.mm-suchauswahl-eintrag.ist-gewaehlt::before {
    content: "";
    display: inline-block;
    width: .85em; height: .85em;
    margin-right: 6px;
    vertical-align: -0.05em;
    background-color: var(--mm-blue-700);
    -webkit-mask: var(--mm-icon-haken) no-repeat center / contain;
    mask: var(--mm-icon-haken) no-repeat center / contain;
}
.mm-suchauswahl-eintrag.ist-aus { color: var(--mm-ink-500); cursor: default; }
.mm-suchauswahl-nichts { color: var(--mm-ink-500); font-size: 13px; margin: 10px 0 4px; text-align: center; }
.mm-suchauswahl-nichts[hidden] { display: none; }

/* Erklaerung unter einem Schalter in den Anzeige-Einstellungen */
.mm-live-hinweis {
    display: block;
    color: var(--mm-ink-500);
    font-size: 12.5px;
    margin: 2px 0 0 24px;
}

/* ==========================================================================
   8. Chat

   Die Gestalt lag frueher als rund achtzig .css()-Aufrufe in mmChat.js -
   feste 160x20-Kaesten, schwarze Rahmen, weisser Grund. Sie steht jetzt
   hier, damit sie die Tokens mittraegt, das dunkle Design kennt und beide
   Oberflaechen (customer-admin und agents) dieselbe benutzen; beide binden
   mmdial.css ein.

   Die Klassennamen sind absichtlich die alten geblieben. Sie stehen in
   mmChat.js an vielen Stellen und moeglicherweise in Kampagnenmasken -
   ein Umbenennen haette nichts verbessert und alles gefaehrdet.
   ========================================================================== */

.mmchat {
    font-family: var(--mm-font);
    box-sizing: border-box;
}
.mmchat *, .mmchat *::before, .mmchat *::after { box-sizing: inherit; }

/* --- Startknopf unten rechts ------------------------------------------- */

#mmchatusers {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 132px;
    padding: 9px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--mm-blue-700);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--mm-shadow-lg);
    user-select: none;
}
#mmchatusers:hover { background: var(--mm-blue-800); }

/* Abgeschalteter Chat: grau und zurueckhaltend, aber weiter anklickbar -
   ueber denselben Knopf schaltet man ihn wieder ein. */
#mmchatusers.ist-aus {
    background: var(--mm-surface-2);
    color: var(--mm-ink-500);
    border: 1px solid var(--mm-line);
    box-shadow: var(--mm-shadow);
}

#mmchatusers .mm-chat-marke { flex: 1 1 auto; text-align: left; }

/* Zustandspunkt am Startknopf: gruen = erreichbar, grau = abgeschaltet.
   Vorher unterschied nur die Hintergrundfarbe, und abgeschaltet wurde
   ueber ein "x", das man eher fuer "Leiste schliessen" hielt. */
#mmchatusers .mm-chat-punkt {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mm-ok);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}
#mmchatusers.ist-aus .mm-chat-punkt {
    background: transparent;
    border: 2px solid var(--mm-ink-500);
    box-shadow: none;
}

/* --- Suche, Fuss und Typkennzeichnung der Kontaktliste ----------------- */

.mm-chat-suchzeile { padding: 4px 4px 8px; }

.mm-chat-suche {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    background: var(--mm-surface);
    color: var(--mm-ink-900);
    font-size: 13.5px;
}
.mm-chat-suche:focus {
    outline: none;
    border-color: var(--mm-blue-500);
    box-shadow: 0 0 0 3px var(--mm-blue-100);
}

.mm-chat-kontakte { display: block; }

.mmchatcontact {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mm-chat-kontaktname {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gruppen und Kampagnen sind keine Personen - das soll man sehen. */
.mm-chat-typ {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--mm-blue-100);
    color: var(--mm-blue-800);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.mmchatcontact[data-typ="kampagne"] .mm-chat-typ { background: var(--mm-warn-bg); color: var(--mm-ink-900); }
.mmchatcontact[data-typ="alle"] .mm-chat-typ     { background: var(--mm-ok-bg);   color: var(--mm-ink-900); }

.mm-chat-anzahl {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 6px;
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    color: var(--mm-ink-500);
    font-size: 11.5px;
    text-align: center;
}

.mm-chat-fuss {
    padding: 8px 4px 2px;
    margin-top: 4px;
    border-top: 1px solid var(--mm-line);
}

.mm-chat-schalter, .mm-chat-knopf {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    color: var(--mm-ink-700);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.mm-chat-schalter:hover, .mm-chat-knopf:hover { border-color: var(--mm-blue-500); color: var(--mm-blue-800); }
.mm-chat-knopf { margin-top: 10px; background: var(--mm-blue-700); border-color: var(--mm-blue-700); color: #fff; }
.mm-chat-knopf:hover { background: var(--mm-blue-800); color: #fff; }

/* --- Kopfzeile des Gespraechsfensters ---------------------------------- */

.mm-chat-kopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--mm-line);
    background: var(--mm-surface-2);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mm-ink-900);
}
.mm-chat-kopfname {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-chat-kopfknopf {
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    background: var(--mm-surface);
    color: var(--mm-ink-700);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.mm-chat-kopfknopf:hover { border-color: var(--mm-blue-500); color: var(--mm-blue-800); }

/* --- Befehlsliste ------------------------------------------------------ */

.mm-chat-befehle {
    position: absolute;
    top: 38px;
    left: 8px;
    right: 8px;
    z-index: 5;
    max-height: 60%;
    overflow-y: auto;
    padding: 6px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow-lg);
}

.mm-chat-befehl {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: var(--mm-radius-sm);
    background: transparent;
    color: var(--mm-ink-700);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.mm-chat-befehl:hover { background: var(--mm-blue-050); color: var(--mm-blue-800); }

/* Befehle, von denen der Agent nichts sieht. */
.mm-chat-befehl.ist-still { color: var(--mm-blue-800); font-style: italic; }
.mm-chat-befehl.ist-still::before { content: "\25CF\00a0"; font-size: 9px; vertical-align: middle; }

/* Das gerade benutzte Geraet in der Auswahl. */
.mm-chat-befehl.ist-gewaehlt { background: var(--mm-blue-050); font-weight: 700; }
.mm-chat-befehl.ist-gewaehlt::after { content: "\00a0\2713"; }

.mm-chat-befehle-titel {
    padding: 8px 9px 3px;
    color: var(--mm-ink-500);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.mm-chat-befehle-titel:first-child { padding-top: 2px; }

.mm-chat-befehle-hinweis {
    padding: 4px 9px 8px;
    color: var(--mm-ink-500);
    font-size: 12px;
}

/* ==========================================================================
   Kommentare im Filterbaukasten

   Eine Filterregel aus zwanzig Bedingungen sagt nicht, warum sie so
   aussieht. Jede Zeile und jeder Bedingungsblock traegt deshalb ein
   Kommentarfeld. Es ist eingeklappt, solange nichts drinsteht - sonst
   waere der Baukasten doppelt so hoch, ohne mehr zu sagen.
   ========================================================================== */

/* Zwei Spielarten der Zeilenaktion, die es noch nicht gab: eine fuer das
   Loeschen, eine fuer die kleinen Sortierpfeile. */
.mm-tat.mm-tat--weg:hover { border-color: var(--mm-err); color: var(--mm-err); }

.mm-tat.mm-tat--pfeil {
    width: 22px;
    height: 22px;
    line-height: 20px;
    font-size: 10px;
    text-align: center;
    text-decoration: none;
}

/* --- Der Baukasten selbst ---------------------------------------------
   Die Bloecke waren an nichts als den runden Klammern zu erkennen, und
   die Knoepfe waren Sprite-Grafiken des alten jQuery-UI-Themes: ein Plus,
   ein dickes Plus und ein Stern, deren Bedeutung nur der Tooltip verriet.
   Jetzt beschriftete Knoepfe und sichtbar geschachtelte Bloecke.
   -------------------------------------------------------------------- */

.sqlbuildermain { margin: 6px 0 14px; }

.sql_element_where {
    position: relative;
    margin: 8px 0;
    padding: 10px 12px 12px;
    border: 1px solid var(--mm-line);
    border-left: 3px solid var(--mm-blue-500);
    border-radius: var(--mm-radius);
    background: var(--mm-surface);
}
/* Verschachtelte Bloecke ruecken ein und wechseln die Farbe, damit die
   Ebene ohne Klammerzaehlen erkennbar ist. */
.sql_element_where .sql_element_where { border-left-color: var(--mm-ok); background: var(--mm-surface-2); }
.sql_element_where .sql_element_where .sql_element_where { border-left-color: var(--mm-warn); }

/* Die Klammern haben ausgedient - der Rahmen sagt dasselbe deutlicher. */
.sql_element_where > .bracketopen,
.sql_element_where > .bracketclose { display: none; }

.sql_where_element {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 4px 0;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: var(--mm-radius-sm);
    background: var(--mm-canvas);
}
.sql_where_element:hover { border-color: var(--mm-line); }
.sql_where_element select,
.sql_where_element input[type="text"] { margin: 0; }

/* Die Bedingung soll auf eine Zeile passen.

   Mit Schalter und Kopierknopf sind je Zeile zwei Bedienelemente
   dazugekommen; bei 1000 Pixel Fensterbreite brach sie dadurch um. Statt
   fester Breiten duerfen die Felder jetzt schrumpfen - die Feldauswahl
   ist mit ihren langen Bezeichnungen der groesste Posten und gibt zuerst
   nach. Umbrechen kann die Zeile weiterhin, nur eben spaeter. */
.sql_where_element .fields          { flex: 1 1 180px; min-width: 130px; max-width: 300px; }
.sql_where_element .fieldsoperator  { flex: 0 1 170px; min-width: 110px; }
.sql_where_element .valueinput      { flex: 1 1 130px; min-width: 90px; }
.sql_where_element .mm-filter-kommentar { flex: 1 1 150px; min-width: 110px; }

/* Zwei Waehler, zwei Bedeutungen - und die waren nicht zu unterscheiden.

   .where_combinationselect steht am Ende eines Blocks und sagt, wie die
   Bedingungen *innerhalb* verknuepft werden.

   .where_combinationselect_bracket steht am Anfang eines Blocks und sagt,
   wie dieser Block mit dem *darueber* verknuepft wird. Er sitzt deshalb
   jetzt oben auf der Kante des Blocks, halb ueber dem Rahmen - dort, wo
   die Naht zwischen den beiden Bloecken liegt. Verschoben wird nichts:
   seine Stelle im Markup wertet sqlBuilder.parseWhere() aus, nur die
   Darstellung aendert sich. */

.sql_element_where { padding-top: 16px; }

.sql_element_where > .where_combinationselect {
    min-width: 84px;
    margin-right: 6px;
    padding: 3px 8px;
    border: 1px solid var(--mm-blue-500);
    border-radius: 999px;
    background: var(--mm-blue-050);
    color: var(--mm-blue-800);
    font-size: 12.5px;
    font-weight: 700;
}

.sql_element_where > .where_combinationselect_bracket {
    position: absolute;
    top: -12px;
    left: 14px;
    z-index: 1;
    min-width: 84px;
    padding: 3px 10px;
    border: 1px solid var(--mm-warn);
    border-radius: 999px;
    background: var(--mm-warn-bg);
    color: var(--mm-ink-900);
    font-size: 12.5px;
    font-weight: 700;
}

/* Beschriftung daneben, damit klar ist, worauf sich der Waehler bezieht.
   Ueber :has am Block, weil sich an ein <select> kein ::before haengen
   laesst. Kennt der Browser :has nicht, fehlt nur die Beschriftung - die
   Plakette sitzt trotzdem sichtbar auf der Naht. */
.sql_element_where:has(> .where_combinationselect_bracket)::before {
    content: "verknüpft mit dem Block darüber";
    position: absolute;
    top: -10px;
    left: 108px;
    padding: 0 6px;
    background: var(--mm-surface);
    color: var(--mm-ink-500);
    font-size: 11px;
}
.sql_element_where .sql_element_where:has(> .where_combinationselect_bracket)::before {
    background: var(--mm-surface-2);
}

/* --- Abschalten und Duplizieren --------------------------------------- */

.mm-filter-schalter {
    width: 30px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    background: var(--mm-ok);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}
.mm-filter-schalter::before {
    content: "";
    position: absolute;
    top: 1px; left: 13px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: left .12s ease;
}
.ist-aus > .mm-filter-schalter,
.ist-aus .mm-filter-blockkopf > .mm-filter-schalter,
.sql_where_element.ist-aus .mm-filter-schalter { background: var(--mm-gray-500); }
.ist-aus > .mm-filter-schalter::before,
.ist-aus .mm-filter-blockkopf > .mm-filter-schalter::before,
.sql_where_element.ist-aus .mm-filter-schalter::before { left: 1px; }

@media (prefers-reduced-motion: reduce) {
    .mm-filter-schalter::before { transition: none; }
}

/* Abgeschaltet: sichtbar, aber erkennbar ausser Kraft. Durchgestrichen
   waere zu viel - die Zeile soll noch lesbar bleiben. */
.sql_where_element.ist-aus,
.sql_element_where.ist-aus {
    opacity: .55;
    background-image: repeating-linear-gradient(135deg,
        transparent 0 8px, rgba(127,127,127,.10) 8px 16px);
}
.sql_element_where.ist-aus { border-left-color: var(--mm-gray-500); }


/* --- Kleinigkeiten in Listen und Vorschau ----------------------------- */

.mm-typ {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}
.mm-typ.ist-filter { background: var(--mm-blue-100); color: var(--mm-blue-800); }
.mm-typ.ist-regel  { background: var(--mm-warn-bg);  color: var(--mm-ink-900); }

.mm-status-kuerzel {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface-2);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11.5px;
}

.mm-filter-abschnitt {
    margin: 14px 0 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--mm-line);
    color: var(--mm-ink-500);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.mm-filter-wahl { display: inline-block; margin: 2px 0; cursor: pointer; }
.mm-hinweis { color: var(--mm-ink-500); font-size: 12.5px; margin: -4px 0 10px; }

.mm-filter-knopf {
    padding: 4px 10px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    color: var(--mm-ink-700);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.mm-filter-knopf:hover { border-color: var(--mm-blue-500); color: var(--mm-blue-800); }

/* Entfernen: ein Kreuz, damit es sich von den Hinzufuegen-Knoepfen
   unterscheidet, ohne rot zu schreien. */
.mm-filter-knopf--weg {
    width: 26px;
    padding: 4px 0;
    position: relative;
    color: var(--mm-ink-500);
}
.mm-filter-knopf--weg::before,
.mm-filter-knopf--weg::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 11px; height: 2px;
    margin: -1px 0 0 -5.5px;
    background: currentColor;
    border-radius: 1px;
}
.mm-filter-knopf--weg::before { transform: rotate(45deg); }
.mm-filter-knopf--weg::after  { transform: rotate(-45deg); }
.mm-filter-knopf--weg:hover { border-color: var(--mm-err); color: var(--mm-err); }

/* Beide Symbolknoepfe brauchen eine eigene Hoehe.

   Ein Knopf ohne Text hat keine Zeilenbox - er war dadurch nur 10px hoch,
   waehrend die Auswahlfelder daneben 34px messen. Beim Kreuz fiel das
   nicht auf, weil es ueber 50% mittig sitzt; beim Kopiersymbol mit festen
   Abstaenden ragte es unten heraus und sah verschoben aus. */
.mm-filter-knopf--weg,
.mm-filter-knopf--kopie {
    width: 28px;
    height: 28px;
    padding: 0;
    position: relative;
    flex: 0 0 auto;
}

/* Duplizieren: zwei versetzte Blaetter, als Paar mittig gesetzt.
   Die Randstaerke zaehlt zur Groesse, deshalb sind die Abstaende so
   gewaehlt, dass die Umrisse beider Blaetter zusammen mittig liegen. */
.mm-filter-knopf--kopie::before,
.mm-filter-knopf--kopie::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}
.mm-filter-knopf--kopie::before { margin: -8px 0 0 -7px; }
.mm-filter-knopf--kopie::after  { margin: -4px 0 0 -3px; background: var(--mm-surface); }
.mm-filter-knopf--kopie:hover::after { background: var(--mm-blue-050); }

.mm-filter-kommentarknopf {
    margin-left: 4px;
    padding: 1px 6px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    color: var(--mm-ink-500);
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
    vertical-align: middle;
}
.mm-filter-kommentarknopf:hover { border-color: var(--mm-blue-500); color: var(--mm-blue-800); }
.mm-filter-kommentarknopf.ist-offen { background: var(--mm-blue-050); color: var(--mm-blue-800); }

.mm-filter-kommentar,
.mm-filter-blockkommentar {
    display: none;
    margin-left: 6px;
    min-width: 220px;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-warn-bg);
    color: var(--mm-ink-900);
    font-size: 12.5px;
    font-style: italic;
}
.mm-filter-kommentar:focus,
.mm-filter-blockkommentar:focus {
    outline: none;
    border-color: var(--mm-blue-500);
    box-shadow: 0 0 0 3px var(--mm-blue-100);
}

/* Sichtbar, sobald etwas drinsteht oder jemand den Knopf gedrueckt hat. */
.hat-kommentar > .mm-filter-kommentar,
.hat-kommentar > .mm-filter-blockkommentar,
.mm-filter-blockkopf.hat-kommentar .mm-filter-blockkommentar,
.sql_where_element.hat-kommentar .mm-filter-kommentar { display: inline-block; }

.mm-filter-blockkopf {
    display: inline-block;
    margin-left: 4px;
}

/* Reinhoeren: ein Kopfhoerer statt einer Beschriftung, sonst wird die
   Kopfzeile des Chatfensters zu voll. */
.mm-chat-hoerknopf {
    width: 28px;
    padding: 3px 0;
    position: relative;
}
.mm-chat-hoerknopf::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin: 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--mm-icon-kopfhoerer) center / contain no-repeat;
            mask: var(--mm-icon-kopfhoerer) center / contain no-repeat;
}

/* Anzeige der laufenden Ueberwachung. Bewusst kein Dialog: sie soll
   sichtbar bleiben, waehrend man weiterarbeitet - wer mithoert, soll das
   nicht vergessen. */
.mm-mithoeren {
    position: fixed;
    right: 14px;
    bottom: 62px;
    z-index: 910;
    width: 268px;
    padding: 10px 12px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-left: 4px solid var(--mm-warn);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow-lg);
    font-size: 13px;
}
.mm-mithoeren.ist-verbunden { border-left-color: var(--mm-err); }

.mm-mithoeren-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.mm-mithoeren-titel { flex: 1 1 auto; font-weight: 700; }

.mm-mithoeren-punkt {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mm-warn);
}
.mm-mithoeren.ist-verbunden .mm-mithoeren-punkt {
    background: var(--mm-err);
    animation: mm-mithoeren-puls 1.6s ease-in-out infinite;
}
@keyframes mm-mithoeren-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(190, 60, 60, .75); }
    50%      { box-shadow: 0 0 0 6px rgba(190, 60, 60, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .mm-mithoeren.ist-verbunden .mm-mithoeren-punkt { animation: none; }
}

.mm-mithoeren-stop {
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    background: var(--mm-surface);
    color: var(--mm-ink-700);
    font-size: 12px;
    cursor: pointer;
}
.mm-mithoeren-stop:hover { border-color: var(--mm-err); color: var(--mm-err); }

.mm-mithoeren-wer { font-weight: 600; }
.mm-mithoeren-zustand { color: var(--mm-ink-500); font-size: 12px; margin: 2px 0 6px; }
.mm-mithoeren-regler { display: block; color: var(--mm-ink-500); font-size: 12px; }
.mm-mithoeren-regler input { width: 100%; }

/* Auswahl der Audiogeraete im Agenteninterface. */
#telefon_geraete { margin-top: 10px; }
#telefon_geraete .telefon_geraet_zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}
#telefon_geraete .telefon_geraet_zeile label { flex: 0 0 84px; }
#telefon_geraete .telefon_geraet_zeile select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
#telefon_geraete_hinweis { margin-top: 4px; color: var(--mm-ink-500); font-size: 12px; }

#mmchatusers .mmclosebutton,
.mmchatwindow .mmclosebutton,
.mmchatwindow .mmminusbutton {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    opacity: .75;
    cursor: pointer;
    position: relative;
}
#mmchatusers .mmclosebutton:hover,
.mmchatwindow .mmclosebutton:hover,
.mmchatwindow .mmminusbutton:hover { opacity: 1; background: rgba(127, 127, 127, .22); }

/* Kreuz und Strich als Formen statt als Sprite-Grafik des UI-Themes. */
.mmclosebutton::before, .mmclosebutton::after,
.mmminusbutton::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 2px;
    margin: -1px 0 0 -5.5px;
    background: currentColor;
    border-radius: 1px;
}
.mmclosebutton::before { transform: rotate(45deg); }
.mmclosebutton::after  { transform: rotate(-45deg); }

/* --- Kontaktliste ------------------------------------------------------ */

#mmchatcontactlist {
    position: fixed;
    right: 14px;
    bottom: 62px;
    z-index: 900;
    width: 268px;
    max-height: min(52vh, 380px);
    overflow-y: auto;
    padding: 6px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow-lg);
}

.mmchatcontact {
    padding: 9px 10px;
    border-radius: var(--mm-radius-sm);
    color: var(--mm-ink-700);
    font-size: 14px;
    cursor: pointer;
}
.mmchatcontact:hover { background: var(--mm-blue-050); color: var(--mm-blue-800); }

.mm-chat-leer {
    padding: 14px 10px;
    color: var(--mm-ink-500);
    font-size: 13.5px;
    text-align: center;
}

/* --- Leiste der offenen Gespraeche ------------------------------------- */

#mmchatwindowholder {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 890;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    /* Platz fuer den Startknopf rechts freihalten. */
    max-width: calc(100vw - 190px);
    /* Der Streifen selbst faengt keine Klicks ab - nur die Reiter darin. */
    pointer-events: none;
}

.mmchatwindow {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 210px;
    padding: 8px 10px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow);
    color: var(--mm-ink-700);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.mmchatwindow:hover { border-color: var(--mm-blue-500); }

.mmchatwindow .mm-chat-name {
    order: 1;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Zaehler steht zwischen Name und Knoepfen, egal in welcher
   Reihenfolge das Skript die Teile anhaengt - im Agentenfenster gibt es
   den Minusknopf nicht. */
.mmchatwindow .counter        { order: 2; }
.mmchatwindow .mmminusbutton  { order: 3; }
.mmchatwindow .mmclosebutton  { order: 4; }
.mmchatwindow .mmchatwindowpopup { order: 0; }

/* Zaehler ungelesener Nachrichten */
.mmchatwindow .counter {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mm-err);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* Hinweis auf eine neue Nachricht. Ersetzt das dreifach geschachtelte
   effect("highlight") von jQuery UI. */
@keyframes mm-chat-pochen {
    0%, 100% { box-shadow: var(--mm-shadow); }
    50%      { box-shadow: 0 0 0 4px var(--mm-blue-100); }
}
.mmchatwindow.ist-neu { animation: mm-chat-pochen 1s ease-in-out 3; }

/* --- Das Gespraechsfenster selbst -------------------------------------- */

/* Haengt am Reiter statt am body: damit erledigt CSS die Platzierung, und
   die frueheren Rechnungen mit offset() und Scrollbalkenbreite entfallen. */
.mmchatwindowpopup {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 891;
    display: flex;
    flex-direction: column;
    width: 304px;
    height: 340px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow-lg);
    cursor: auto;

    /* Ziehbar an der unteren rechten Ecke. Ein Analysebericht oder ein
       laengeres Gespraech passt in 304x340 nicht gut; wer mehr sehen will,
       zieht das Fenster auf. resize verlangt ein overflow ungleich
       visible - hidden erfuellt das und schneidet nichts ab, weil der
       Verlauf darin selbst scrollt. */
    resize: both;
    overflow: hidden;
    min-width: 260px;
    min-height: 220px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 90px);
}

.mmchathistory {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--mm-canvas);
}

/* Sprechblasen: eingehend links, ausgehend rechts. */
.mmchatnachricht {
    max-width: 84%;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    /* Zeilenumbrueche der Nachricht bleiben stehen. Ohne das kaeme der
       mehrzeilige Bericht der Agentenanalyse als eine Wurst an. */
    white-space: pre-wrap;
}
.mmchatnachricht.ist-eingehend {
    align-self: flex-start;
    background: var(--mm-surface-2);
    border: 1px solid var(--mm-line);
    border-bottom-left-radius: 4px;
    color: var(--mm-ink-900);
}
.mmchatnachricht.ist-ausgehend {
    align-self: flex-end;
    background: var(--mm-blue-700);
    border-bottom-right-radius: 4px;
    color: #fff;
}
/* Mehrzeiliges - etwa der Bericht der Agentenanalyse - braucht die volle
   Breite und eine feste Schrittweite, sonst franst die Tabelle aus. */
.mmchatnachricht.ist-bericht {
    align-self: stretch;
    max-width: 100%;
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    font-size: 11.5px;
    line-height: 1.4;
}

.mmchatnachricht.ist-hinweis {
    align-self: center;
    max-width: 100%;
    background: var(--mm-warn-bg);
    border: 1px solid var(--mm-warn);
    color: var(--mm-ink-900);
    font-size: 12.5px;
    text-align: center;
}

.mmchattimeshow {
    display: block;
    margin-bottom: 1px;
    font-size: 11px;
    opacity: .75;
}
.ist-ausgehend .mmchattimeshow { color: #fff; }

.mmchatentry {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid var(--mm-line);
    background: var(--mm-surface);
}
.mmchatentry input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    background: var(--mm-surface);
    color: var(--mm-ink-900);
    font-size: 13.5px;
}
.mmchatentry input[type="text"]:focus {
    outline: none;
    border-color: var(--mm-blue-500);
    box-shadow: 0 0 0 3px var(--mm-blue-100);
}

/* Kreisel statt der Animations-GIF-Datei des alten UI-Themes. */
.mm-chat-kreisel {
    align-self: center;
    width: 16px;
    height: 16px;
    border: 2px solid var(--mm-line);
    border-top-color: var(--mm-blue-500);
    border-radius: 50%;
    animation: mm-chat-drehen 900ms linear infinite;
}
@keyframes mm-chat-drehen { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .mm-chat-kreisel { animation: none; }
    .mmchatwindow.ist-neu { animation: none; border-color: var(--mm-blue-500); }
}

/* Auf schmalen Geraeten nimmt das Fenster die Breite des Bildschirms. */
@media (max-width: 575.98px) {
    #mmchatwindowholder { max-width: calc(100vw - 28px); }
    .mmchatwindowpopup {
        width: calc(100vw - 28px);
        left: 0;
    }
    #mmchatcontactlist { width: calc(100vw - 28px); }
}

/* ==========================================================================
   9. Responsiv
   ========================================================================== */

@media (max-width: 991.98px) {
    .mm-layout { flex-direction: column; padding: 10px; gap: 10px; }
    #menu-left { width: 100%; flex: 1 1 auto; }
    #content-container { width: 100%; }
}

@media (max-width: 991.98px) {
    .mm-live-karten { grid-template-columns: minmax(0, 1fr); }
    .mm-live-karte-titel { min-height: 0; }
    .mm-live-takt { margin-left: 0; width: 100%; }
}

@media (max-width: 767.98px) {
    .mm-nav-toggle { display: inline-block; }
    .mm-live-kachel-wert { font-size: 24px; }
    .mm-live-kachel select { font-size: 18px; }
    .mm-live-chart { height: 200px; }
    .mm-live-ansicht { width: 100%; }
    .mm-live-ansicht-knopf { flex: 1 1 0; padding: 8px 6px; }
    .mm-live-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #menu-top { display: none; }
    #menu-top.mm-open { display: block; }
    #menu-top ul { flex-direction: column; padding: 4px; }
    #menu-top ul li a { border-bottom: 0; border-left: 2px solid transparent; padding: 10px 12px; }
    #menu-top ul li a.active, #menu-top ul li.active a { border-left-color: var(--mm-blue-500); border-bottom-color: transparent; }

    #topbar { padding: 0 10px; }
    #topbar img { height: 24px; }
    .mm-topbar-actions { gap: 8px; font-size: 12px; }

    body { font-size: 13.5px; }
    #content-container { padding: 12px; }
    .ui-dialog { max-width: calc(100vw - 16px); }
}

@media (max-width: 575.98px) {
    /* Beschriftungen weichen, Symbole bleiben */
    .mm-hide-xs { display: none; }
}

@media print {
    #topbar, #menu-top-shadow, #menu-left, #footer, .mm-theme-toggle, .mm-nav-toggle { display: none !important; }
    #content-container { border: 0; box-shadow: none; padding: 0; }
    .mm-layout { display: block; padding: 0; }
}