/*
    cardX Guest V1.9
    ----------------
    Zusätzliche UI-Schicht über DevExpress Office365.
    WICHTIG: Jede Regel ist unter body.cx-guest gekapselt.
    Ohne diese Body-Klasse bleibt das vorhandene Office365-Design unverändert.
*/

body.cx-guest {
    --cxg-bg: #f5f7fa;
    --cxg-surface: #ffffff;
    --cxg-surface-soft: #f8fafc;
    --cxg-line: #dde5ec;
    --cxg-line-strong: #cbd7e2;
    --cxg-text: #243447;
    --cxg-muted: #718096;
    --cxg-blue: #1682b8;
    --cxg-blue-dark: #0f6f9f;
    --cxg-orange: #f47c20;
    --cxg-orange-dark: #dc6811;
    --cxg-orange-soft: #fff5eb;
    --cxg-shadow: 0 8px 26px rgba(39, 63, 82, .10);
    --cxg-radius: 10px;
    background: var(--cxg-bg) !important;
    color: var(--cxg-text);
    font-family: "Segoe UI", Arial, sans-serif;
}

/* ---------- Anwendungshülle / Header ---------- */
/*
   V1.4: Der DevExpress-Header bleibt strukturell unangetastet.
   HeaderPane ist FixedPosition=WindowTop und berechnet seine Hoehe sowie
   die Menueorientierung clientseitig. Aenderungen an display, padding,
   min-height oder inneren dxm-Strukturelementen koennen die Berechnung
   stoeren. Deshalb hier nur nicht-strukturelle Farbdetails.
*/

body.cx-guest .headerMenu .dxm-hovered,
body.cx-guest .headerMenu [class*="dxm-hovered"] {
    background-color: var(--cxg-orange-soft) !important;
    color: var(--cxg-orange-dark) !important;
}

body.cx-guest .headerMenu .dxm-selected,
body.cx-guest .headerMenu [class*="dxm-selected"] {
    background-color: var(--cxg-orange) !important;
    color: #fff !important;
}

body.cx-guest .headerMenu .dxm-selected a,
body.cx-guest .headerMenu [class*="dxm-selected"] a {
    color: #fff !important;
}

/* Untermenues: nur Farbe/Schatten, keine Layout-Eigenschaften */
body.cx-guest [class*="dxm-popup"] {
    border-color: var(--cxg-line) !important;
    background-color: #fff !important;
    box-shadow: var(--cxg-shadow) !important;
}

/* Inhaltsbereich darf modernisiert werden; der feste Header selbst nicht. */
body.cx-guest .mainContentPane,
body.cx-guest .mainContentPane > div,
body.cx-guest .contentPane,
body.cx-guest .content {
    background: var(--cxg-bg) !important;
}

body.cx-guest .contentPane,
body.cx-guest .content {
    box-sizing: border-box;
    padding: 18px 20px 28px 20px;
}

body.cx-guest .footerPane {
    border-top-color: var(--cxg-line) !important;
    background: #fff !important;
}



/* ---------- V1.5: Header-Veredelung ohne Eingriff in DevExpress-Geometrie ----------
   Nur vorhandene Wrapper, Farben, Schrift und Schatten werden angepasst.
   Keine display-/position-/height-/padding-Aenderungen an DevExpress-internen dxm-Elementen. */
body.cx-guest .headerPane {
    background: #ffffff !important;
    border-bottom: 1px solid var(--cxg-line) !important;
    box-shadow: 0 3px 12px rgba(39, 63, 82, .08) !important;
}

body.cx-guest .headerTop {
    background: #ffffff !important;
    border-bottom: 1px solid #edf1f4;
}

body.cx-guest .headerNavContainer {
    background: #ffffff !important;
}

/* Hauptmenue: nur optische Eigenschaften. Keine Geometrie der dxm-Struktur anfassen. */
body.cx-guest .headerMenu {
    background: #f7f9fb !important;
    box-shadow: inset 0 -1px 0 #e2e8ee;
}

body.cx-guest .headerMenu a {
    color: #405467 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

body.cx-guest .headerMenu .dxm-hovered,
body.cx-guest .headerMenu [class*="dxm-hovered"] {
    border-radius: 5px !important;
}

body.cx-guest .headerMenu .dxm-selected,
body.cx-guest .headerMenu [class*="dxm-selected"] {
    border-radius: 5px !important;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .06);
}

body.cx-guest .headerMenu .dxm-selected a,
body.cx-guest .headerMenu [class*="dxm-selected"] a {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Betriebsauswahl als ruhige Kontextleiste. */
body.cx-guest .headerToolsBar {
    background: #f8fafc !important;
    border-top: 1px solid #edf1f4;
    border-bottom: 1px solid #e5ebf0;
    color: var(--cxg-text) !important;
}

body.cx-guest .headerToolsLabel {
    color: #42566a !important;
    font-size: 13px;
    font-weight: 600 !important;
}

body.cx-guest .headerToolsCombo [class*="dxeButtonEdit"],
body.cx-guest .headerToolsCombo[class*="dxeButtonEdit"] {
    border-color: #cbd7e2 !important;
    background: #ffffff !important;
    border-radius: 6px !important;
}

/* Erweiterte Funktionen: flacher und ruhiger als ein klassisches RoundPanel. */
body.cx-guest .cx-guest-filter-panel {
    border: 1px solid #dfe7ee !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.cx-guest .cx-guest-filter-panel [class*="dxrpHeader"] {
    background: #f8fafc !important;
    border-bottom: 1px solid #e5ebf0 !important;
    color: #334a5e !important;
    font-weight: 600 !important;
}

/* Hauptgrid: etwas klarere Typografie ohne die Spaltenbreiten zu vergroessern. */
body.cx-guest .cx-guest-main-grid {
    font-size: 13px !important;
}

body.cx-guest .cx-guest-main-grid [class*="dxgvHeader"] {
    background: #edf4f8 !important;
    color: #2f485c !important;
}

body.cx-guest .cx-guest-main-grid [class*="dxgvHeader"] a,
body.cx-guest .cx-guest-main-grid [class*="dxgvHeader"] td {
    color: #2f485c !important;
    font-weight: 600 !important;
}

body.cx-guest .cx-guest-main-grid [class*="dxgvDataRow"] td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

body.cx-guest .cx-guest-main-grid [class*="dxgvDataRow"]:hover td {
    background: #f0f7fb !important;
}

body.cx-guest .footerPane {
    color: var(--cxg-muted) !important;
}

/* ---------- Editors ---------- */
body.cx-guest input[type="text"],
body.cx-guest input[type="password"],
body.cx-guest textarea,
body.cx-guest [class*="dxeTextBox"],
body.cx-guest [class*="dxeButtonEdit"],
body.cx-guest [class*="dxeMemo"] {
    border-radius: 6px !important;
}

body.cx-guest [class*="dxeTextBox"],
body.cx-guest [class*="dxeButtonEdit"],
body.cx-guest [class*="dxeMemo"] {
    border-color: #cfd9e2 !important;
    background: #fff !important;
}

body.cx-guest [class*="dxeFocused"],
body.cx-guest [class*="dxeButtonEditSys"]:focus-within {
    border-color: var(--cxg-blue) !important;
    box-shadow: 0 0 0 2px rgba(22, 130, 184, .12) !important;
}

/* ---------- Buttons ---------- */
body.cx-guest [class*="dxbButton"] {
    border-radius: 7px !important;
    transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}

body.cx-guest [class*="dxbButton"]:hover {
    box-shadow: 0 4px 10px rgba(31, 58, 78, .12);
}

/* ---------- RoundPanel / Inhaltskarten ---------- */
body.cx-guest [class*="dxrpControl"],
body.cx-guest [class*="dxpcLite"] > [class*="dxpc-mainDiv"] {
    border: 1px solid var(--cxg-line) !important;
    border-radius: var(--cxg-radius) !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(39, 63, 82, .06);
    overflow: hidden;
}

body.cx-guest [class*="dxrpHeader"],
body.cx-guest [class*="dxpc-header"] {
    background: linear-gradient(#fbfcfd, #f5f8fa) !important;
    border-bottom: 1px solid var(--cxg-line) !important;
    color: var(--cxg-text) !important;
    font-weight: 600 !important;
}

body.cx-guest .cx-guest-filter-panel {
    margin-bottom: 12px;
}

/* ---------- GridView ---------- */
body.cx-guest [class*="dxgvControl"] {
    border-color: var(--cxg-line) !important;
    background: #fff !important;
    color: var(--cxg-text) !important;
}

body.cx-guest [class*="dxgvHeader"] {
    background: #eef4f7 !important;
    color: #334a5e !important;
    border-color: #d9e3ea !important;
    font-weight: 600 !important;
}

body.cx-guest [class*="dxgvHeader"] td,
body.cx-guest [class*="dxgvHeader"] a {
    color: #334a5e !important;
}

body.cx-guest [class*="dxgvFilterRow"] td {
    background: #f8fafc !important;
    border-color: #e3e9ee !important;
}

body.cx-guest [class*="dxgvDataRow"] td {
    border-color: #e8edf1 !important;
}

body.cx-guest [class*="dxgvDataRow"]:hover td {
    background: #f3f8fb !important;
}

body.cx-guest [class*="dxgvSelectedRow"] td,
body.cx-guest [class*="dxgvFocusedRow"] td {
    background: #e7f4fa !important;
    color: var(--cxg-text) !important;
}

body.cx-guest [class*="dxgvPagerBottomPanel"],
body.cx-guest [class*="dxgvPagerTopPanel"] {
    background: #fbfcfd !important;
    border-color: var(--cxg-line) !important;
}

body.cx-guest [class*="dxpLite"] .dxp-current,
body.cx-guest [class*="dxpLite"] [class*="current"] {
    border-radius: 5px !important;
    background: var(--cxg-blue) !important;
    color: #fff !important;
}

/* Grid-Toolbar etwas luftiger und klarer */
body.cx-guest .cx-guest-main-grid [class*="dxgvToolbar"],
body.cx-guest .cx-guest-main-grid [class*="dxtbControl"] {
    background: #fff !important;
    border-color: var(--cxg-line) !important;
}

body.cx-guest .cx-guest-main-grid [class*="dxtb-item"] {
    border-radius: 6px !important;
}

/* ---------- FormLayout / Tabs ---------- */
body.cx-guest [class*="dxflGroupBox"] {
    border-color: var(--cxg-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
}

body.cx-guest [class*="dxflGroupBoxCaption"] {
    color: #334a5e !important;
    font-weight: 600 !important;
}

body.cx-guest .melde-tabs-form .dxtc-tab,
body.cx-guest .melde-tabs-form [class*="dxtc-tab"] {
    border-radius: 7px 7px 0 0 !important;
}

body.cx-guest .melde-tabs-form .dxtc-activeTab,
body.cx-guest .melde-tabs-form [class*="dxtc-activeTab"] {
    background: var(--cxg-orange-soft) !important;
    border-top-color: var(--cxg-orange) !important;
    border-left-color: #ffd4b2 !important;
    border-right-color: #ffd4b2 !important;
}

/* ---------- Login ---------- */
body.cx-guest .cx-login-stage {
    min-height: calc(100vh - 115px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 28px 18px 48px;
    background:
        radial-gradient(circle at 18% 16%, rgba(22, 130, 184, .08), transparent 26%),
        radial-gradient(circle at 82% 84%, rgba(244, 124, 32, .07), transparent 24%),
        var(--cxg-bg);
}

body.cx-guest .cx-login-card {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
    width: min(420px, 100%) !important;
    padding: 24px 26px 20px !important;
    box-sizing: border-box;
    border: 1px solid var(--cxg-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(34, 57, 74, .14) !important;
}

body.cx-guest .cx-login-card > div,
body.cx-guest .cx-login-form,
body.cx-guest .cx-login-form > div {
    width: 100% !important;
    box-sizing: border-box;
}

body.cx-guest .cx-login-form.centered {
    position: static !important;
    top: auto !important;
    margin: 0 !important;
}

body.cx-guest .cx-login-form [class*="dxflCaptionCell"] {
    padding-bottom: 5px !important;
    color: #42566a !important;
    font-size: 13px;
    font-weight: 600;
}

body.cx-guest .cx-login-form [class*="dxflNestedControlCell"] {
    padding-bottom: 10px !important;
}

body.cx-guest .cx-login-form [class*="dxeTextBox"] {
    min-height: 38px;
}

body.cx-guest .cx-login-primary {
    width: 100% !important;
    min-height: 42px;
    border-color: var(--cxg-orange) !important;
    background: var(--cxg-orange) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
}

body.cx-guest .cx-login-primary:hover {
    border-color: var(--cxg-orange-dark) !important;
    background: var(--cxg-orange-dark) !important;
}

body.cx-guest .cx-login-secondary {
    border: 1px solid var(--cxg-line) !important;
    background: #f8fafc !important;
    border-radius: 9px !important;
}

body.cx-guest .errortext {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: #a33b2b !important;
    background: #fff2ef;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    body.cx-guest .contentPane,
    body.cx-guest .content {
        padding: 12px 10px 22px 10px;
    }
}

@media (max-width: 720px) {
    body.cx-guest .cx-login-stage {
        align-items: flex-start;
        padding-top: 28px;
    }

    body.cx-guest .cx-login-card {
        padding: 20px 18px 16px !important;
    }
}


/* ========================================================================== */
/* cardX Guest V1.6 – Polishing                                               */
/* ========================================================================== */
/*
   V1.6 baut bewusst nur auf der stabilen V1.5 auf.
   Keine Aenderungen an der DevExpress-Menuegeometrie oder an Scrollmechaniken.
*/

/* Erweiterte Funktionen: sachlicher statt kursiver Legacy-Paneltitel. */
body.cx-guest .cx-guest-filter-panel [class*="dxrpHeader"],
body.cx-guest .cx-guest-filter-panel [class*="dxrpHeader"] *,
body.cx-guest .cx-guest-filter-panel [class*="dxrpHT"],
body.cx-guest .cx-guest-filter-panel [class*="dxrpHT"] * {
    font-style: normal !important;
    letter-spacing: .01em;
}

/* Semantische Aktionshierarchie. Die Klassen werden im Guest-Modus rein
   clientseitig nach sichtbarem Buttontext gesetzt; Office365 bleibt unberuehrt. */
body.cx-guest .cxg-action-primary,
body.cx-guest .cxg-action-primary [class*="dxb"] {
    border-color: var(--cxg-orange) !important;
    background: var(--cxg-orange) !important;
    color: #fff !important;
}

body.cx-guest .cxg-action-primary:hover,
body.cx-guest .cxg-action-primary:hover [class*="dxb"] {
    border-color: var(--cxg-orange-dark) !important;
    background: var(--cxg-orange-dark) !important;
}

body.cx-guest .cxg-action-secondary,
body.cx-guest .cxg-action-secondary [class*="dxb"] {
    border-color: #cbd7e2 !important;
    background: #fff !important;
    color: #31536b !important;
    box-shadow: none !important;
}

body.cx-guest .cxg-action-secondary:hover,
body.cx-guest .cxg-action-secondary:hover [class*="dxb"] {
    border-color: #aebfcd !important;
    background: #f3f7fa !important;
    color: #203f56 !important;
}

body.cx-guest .cxg-action-danger,
body.cx-guest .cxg-action-danger [class*="dxb"] {
    border-color: #e4b9b4 !important;
    background: #fff !important;
    color: #a64035 !important;
    box-shadow: none !important;
}

body.cx-guest .cxg-action-danger:hover,
body.cx-guest .cxg-action-danger:hover [class*="dxb"] {
    border-color: #d89890 !important;
    background: #fff3f1 !important;
    color: #8f3329 !important;
}

/* Der schwebende PreCheck-Hilfe-Button ist eine Sekundaeraktion und soll
   nicht mit 'Neuer PreCheck' konkurrieren. */
body.cx-guest .cxg-help-button,
body.cx-guest .cxg-help-button [class*="dxb"] {
    border: 1px solid #cbd7e2 !important;
    background: #fff !important;
    color: #31536b !important;
    box-shadow: 0 2px 7px rgba(39, 63, 82, .08) !important;
}

body.cx-guest .cxg-help-button {
    border-radius: 20px !important;
    min-height: 34px !important;
}

body.cx-guest .cxg-help-button:hover,
body.cx-guest .cxg-help-button:hover [class*="dxb"] {
    border-color: #aebfcd !important;
    background: #f3f7fa !important;
}

/* Popup-Aktionen etwas ruhiger und eindeutiger gruppieren. */
body.cx-guest [class*="dxpc"] .cxg-action-primary,
body.cx-guest [class*="dxpc"] .cxg-action-secondary,
body.cx-guest [class*="dxpc"] .cxg-action-danger {
    border-radius: 7px !important;
}

/* Scrollleisten in grossen Popups und horizontalen Vorlagenbereichen etwas
   zurueckhaltender. Nur WebKit/Chromium; andere Browser bleiben unveraendert. */
body.cx-guest [class*="dxpc"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.cx-guest [class*="dxpc"] ::-webkit-scrollbar-track {
    background: #f2f5f7;
    border-radius: 8px;
}

body.cx-guest [class*="dxpc"] ::-webkit-scrollbar-thumb {
    background: #c3ccd4;
    border: 2px solid #f2f5f7;
    border-radius: 8px;
}

body.cx-guest [class*="dxpc"] ::-webkit-scrollbar-thumb:hover {
    background: #aeb9c3;
}

/* Notebook: Popup-Aktionsbuttons duerfen kompakter werden, ohne Felder oder
   Gridbreiten zu veraendern. */
@media (max-width: 1366px) {
    body.cx-guest [class*="dxpc"] .cxg-action-primary,
    body.cx-guest [class*="dxpc"] .cxg-action-secondary,
    body.cx-guest [class*="dxpc"] .cxg-action-danger {
        font-size: 13px !important;
    }
}

/* ========================================================================== */
/* cardX Guest V1.7 – Konsistenzkorrekturen                                  */
/* ========================================================================== */
/*
   Ziel: keine neue Struktur, sondern die letzten optischen Ausreisser angleichen.
   Die funktionierende DevExpress-Geometrie bleibt unveraendert.
*/

/* Login: Ein leerer Fehlerhinweis darf keinen farbigen Platzhalterbalken bilden. */
body.cx-guest .cx-login-form .errortext:empty,
body.cx-guest .cx-login-form .errortext[style*="display: none"],
body.cx-guest .cx-login-form .errortext[style*="display:none"] {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Hauptnavigation: Parent-Items und normale Links muessen exakt dieselbe
   Typografie verwenden. "Weitere Funktionen" wird von DevExpress nicht immer
   als <a>, sondern je nach Zustand als span/div ausgegeben. */
body.cx-guest .headerMenu,
body.cx-guest .headerMenu a,
body.cx-guest .headerMenu span,
body.cx-guest .headerMenu [class*="dxm-content"],
body.cx-guest .headerMenu [class*="dxm-content"] * {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
}

body.cx-guest .headerMenu .dxm-selected,
body.cx-guest .headerMenu [class*="dxm-selected"] {
    font-weight: 600 !important;
}

body.cx-guest .headerMenu .dxm-selected *,
body.cx-guest .headerMenu [class*="dxm-selected"] * {
    font-weight: 600 !important;
}

/* Aufgeklappte Menues: cardX-Guest-Karte statt nacktem Office365-Popup.
   Keine display/position-Aenderungen, damit die DevExpress-Positionierung bleibt. */
body.cx-guest [class*="dxm-popup"] {
    border: 1px solid var(--cxg-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(39, 63, 82, .14) !important;
    padding: 4px !important;
}

body.cx-guest [class*="dxm-popup"] [class*="dxm-item"],
body.cx-guest [class*="dxm-popup"] [class*="dxm-hovered"],
body.cx-guest [class*="dxm-popup"] [class*="dxm-selected"] {
    border-radius: 5px !important;
    background-image: none !important;
}

body.cx-guest [class*="dxm-popup"] [class*="dxm-content"],
body.cx-guest [class*="dxm-popup"] [class*="dxm-content"] a,
body.cx-guest [class*="dxm-popup"] [class*="dxm-content"] span {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: #405467 !important;
}

body.cx-guest [class*="dxm-popup"] [class*="dxm-hovered"] {
    background-color: var(--cxg-orange-soft) !important;
    color: var(--cxg-orange-dark) !important;
}

body.cx-guest [class*="dxm-popup"] [class*="dxm-hovered"] [class*="dxm-content"],
body.cx-guest [class*="dxm-popup"] [class*="dxm-hovered"] a,
body.cx-guest [class*="dxm-popup"] [class*="dxm-hovered"] span {
    color: var(--cxg-orange-dark) !important;
}

/* Grid-Toolbar: DevExpress rendert ToolbarItems ueber Menu-Markup (dxm-*).
   Deshalb muss die Rundung am Item UND am Content sitzen. Damit werden u.a.
   Hauptgemeldet, Refresh und das Hilfe-Dropdown konsistent abgerundet. */
body.cx-guest .cx-guest-main-grid [class*="dxm-item"],
body.cx-guest .cx-guest-main-grid [class*="dxm-selected"],
body.cx-guest .cx-guest-main-grid [class*="dxm-hovered"],
body.cx-guest .cx-guest-main-grid .cxg-toolbar-item {
    border-radius: 7px !important;
    background-clip: padding-box !important;
}

body.cx-guest .cx-guest-main-grid [class*="dxm-content"],
body.cx-guest .cx-guest-main-grid [class*="dxm-content"] > div,
body.cx-guest .cx-guest-main-grid [class*="dxm-content"] > span,
body.cx-guest .cx-guest-main-grid .cxg-toolbar-item [class*="dxm-content"] {
    border-radius: 6px !important;
    background-clip: padding-box !important;
}

/* Check-/Selected-Toolbaritem (z.B. Hauptgemeldet): Orange sauber bis in
   den inneren Content durchziehen und die Office365-Ecken entfernen. */
body.cx-guest .cx-guest-main-grid [class*="dxm-selected"],
body.cx-guest .cx-guest-main-grid [class*="dxm-selected"] [class*="dxm-content"],
body.cx-guest .cx-guest-main-grid .cxg-toolbar-primary,
body.cx-guest .cx-guest-main-grid .cxg-toolbar-primary [class*="dxm-content"] {
    border-color: var(--cxg-orange) !important;
    background-color: var(--cxg-orange) !important;
    background-image: none !important;
    color: #fff !important;
}

body.cx-guest .cx-guest-main-grid [class*="dxm-selected"] *,
body.cx-guest .cx-guest-main-grid .cxg-toolbar-primary * {
    color: #fff !important;
}

/* Icon-Toolbaritems wie Refresh/Hilfe: auch bei reinem Icon dieselbe Form. */
body.cx-guest .cx-guest-main-grid .cxg-toolbar-icon,
body.cx-guest .cx-guest-main-grid .cxg-toolbar-icon [class*="dxm-content"] {
    border-radius: 7px !important;
}

/* V1.6-Aktionshierarchie robuster gegen Skin-Hintergruende machen. */
body.cx-guest .cxg-action-primary,
body.cx-guest .cxg-action-primary [class*="dxb"],
body.cx-guest .cxg-action-primary td,
body.cx-guest .cxg-action-primary div,
body.cx-guest .cxg-action-primary span {
    background-image: none !important;
}

body.cx-guest .cxg-action-secondary,
body.cx-guest .cxg-action-secondary [class*="dxb"],
body.cx-guest .cxg-action-secondary td,
body.cx-guest .cxg-action-secondary div,
body.cx-guest .cxg-action-secondary span {
    background-image: none !important;
    background-color: #fff !important;
    color: #31536b !important;
}

body.cx-guest .cxg-action-danger,
body.cx-guest .cxg-action-danger [class*="dxb"],
body.cx-guest .cxg-action-danger td,
body.cx-guest .cxg-action-danger div,
body.cx-guest .cxg-action-danger span {
    background-image: none !important;
    background-color: #fff !important;
    color: #a64035 !important;
}

/* ========================================================================== */
/* cardX Guest V1.8 – finaler Feinschliff                                    */
/* ========================================================================== */
/*
   V1.8 veraendert weiterhin keine DevExpress-Geometrie. Der Schwerpunkt liegt
   nur auf der visuellen Priorisierung von Hilfe-/Loeschaktionen und einem
   etwas ruhigeren Erscheinungsbild der aufgeklappten Menues.
*/

/* PreCheck-Hilfe: bewusst als Sekundaeraktion. Die Regel ist absichtlich
   deutlich spezifischer als die allgemeinen orangefarbenen Buttonregeln. */
body.cx-guest .cxg-help-button,
body.cx-guest .cxg-help-button[class*="dxbButton"],
body.cx-guest .cxg-help-button [class*="dxb"],
body.cx-guest .cxg-help-button table,
body.cx-guest .cxg-help-button td,
body.cx-guest .cxg-help-button div,
body.cx-guest .cxg-help-button span {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #31536b !important;
    border-color: #c7d4df !important;
}

body.cx-guest .cxg-help-button {
    width: auto !important;
    min-width: 82px !important;
    max-width: 110px !important;
    min-height: 34px !important;
    height: auto !important;
    padding: 0 !important;
    border: 1px solid #c7d4df !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 7px rgba(39, 63, 82, .08) !important;
}

body.cx-guest .cxg-help-button [class*="dxb"] {
    padding: 7px 13px !important;
    border-radius: 17px !important;
    font-weight: 600 !important;
}

body.cx-guest .cxg-help-button:hover,
body.cx-guest .cxg-help-button:hover [class*="dxb"],
body.cx-guest .cxg-help-button:hover td,
body.cx-guest .cxg-help-button:hover div,
body.cx-guest .cxg-help-button:hover span {
    background-color: #f3f7fa !important;
    color: #21445f !important;
    border-color: #aebfcd !important;
}

/* Loeschen: nicht mehr dieselbe orange Prioritaet wie Speichern. Das gilt auch
   fuer Quick-/SelfCheck-Vorlagen, weil V1.8 die Klasse textbasiert auf alle
   *Vorlage loeschen*-Buttons anwendet. */
body.cx-guest .cxg-action-danger,
body.cx-guest .cxg-action-danger[class*="dxbButton"],
body.cx-guest .cxg-action-danger [class*="dxb"],
body.cx-guest .cxg-action-danger table,
body.cx-guest .cxg-action-danger td,
body.cx-guest .cxg-action-danger div,
body.cx-guest .cxg-action-danger span {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #a64035 !important;
    border-color: #dfb6b0 !important;
}

body.cx-guest .cxg-action-danger {
    border: 1px solid #dfb6b0 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

body.cx-guest .cxg-action-danger:hover,
body.cx-guest .cxg-action-danger:hover [class*="dxb"],
body.cx-guest .cxg-action-danger:hover td,
body.cx-guest .cxg-action-danger:hover div,
body.cx-guest .cxg-action-danger:hover span {
    background-color: #fff3f1 !important;
    color: #8f3329 !important;
    border-color: #d89890 !important;
}

/* Untermenues: nur Oberflaeche, Farbe und Rundung. Keine Positions-, Display-
   oder Groessenmanipulation, damit die DevExpress-Berechnung unangetastet bleibt. */
body.cx-guest [class*="dxm-popup"] {
    border: 1px solid #d5dfe7 !important;
    border-radius: 9px !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 10px 26px rgba(39, 63, 82, .16) !important;
}

body.cx-guest [class*="dxm-popup"] [class*="dxm-item"] {
    background-image: none !important;
}

body.cx-guest [class*="dxm-popup"] [class*="dxm-hovered"] {
    background-color: #fff5eb !important;
    background-image: none !important;
}

body.cx-guest [class*="dxm-popup"] [class*="dxm-selected"] {
    background-color: #f47c20 !important;
    background-image: none !important;
}

body.cx-guest [class*="dxm-popup"] [class*="dxm-selected"],
body.cx-guest [class*="dxm-popup"] [class*="dxm-selected"] * {
    color: #ffffff !important;
}



/* ========================================================================== */
/* cardX Guest V1.9 – PreCheck-Hilfe / lokale Flyout-Menues                  */
/* ========================================================================== */
/*
   PreCheck verwendet fuer Hilfe zwei unterschiedliche DevExpress-Strukturen:
   einen texttragenden Hilfe-Control und ein kompaktes Icon-Flyout (? + Pfeil).
   Beide liegen ausserhalb des Hauptheaders und werden in V1.9 clientseitig
   mit cxg-help-button bzw. cxg-fly-button markiert.
*/

/* Kompakte lokale Flyout-Buttons – z.B. das ?-Menue neben "Neuer PreCheck". */
body.cx-guest .cxg-fly-button,
body.cx-guest .cxg-fly-button [class*="dxm-content"],
body.cx-guest .cxg-fly-button [class*="dxm-popOut"],
body.cx-guest .cxg-fly-button [class*="dxm-dropDownButton"] {
    border-radius: 7px !important;
    background-clip: padding-box !important;
}

body.cx-guest .cxg-fly-button {
    overflow: hidden !important;
}

/* Hilfe ausserhalb des Headers: deutlich kompakter und als Sekundaeraktion. */
body.cx-guest .cxg-help-button,
body.cx-guest .cxg-help-button [class*="dxm-content"],
body.cx-guest .cxg-help-button [class*="dxm-popOut"],
body.cx-guest .cxg-help-button [class*="dxb"],
body.cx-guest .cxg-help-button td,
body.cx-guest .cxg-help-button div,
body.cx-guest .cxg-help-button span {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #31536b !important;
    border-color: #c7d4df !important;
}

body.cx-guest .cxg-help-button {
    width: auto !important;
    min-width: 70px !important;
    max-width: 92px !important;
    min-height: 32px !important;
    height: auto !important;
    border: 1px solid #c7d4df !important;
    border-radius: 17px !important;
    box-shadow: 0 2px 7px rgba(39, 63, 82, .08) !important;
    overflow: hidden !important;
}

body.cx-guest .cxg-help-button [class*="dxm-content"],
body.cx-guest .cxg-help-button [class*="dxb"] {
    padding: 6px 10px !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

body.cx-guest .cxg-help-button [class*="dxm-popOut"],
body.cx-guest .cxg-help-button [class*="dxm-dropDownButton"] {
    border-radius: 0 16px 16px 0 !important;
}

body.cx-guest .cxg-help-button:hover,
body.cx-guest .cxg-help-button:hover [class*="dxm-content"],
body.cx-guest .cxg-help-button:hover [class*="dxb"],
body.cx-guest .cxg-help-button:hover td,
body.cx-guest .cxg-help-button:hover div,
body.cx-guest .cxg-help-button:hover span {
    background-color: #f3f7fa !important;
    color: #21445f !important;
    border-color: #aebfcd !important;
}


/* ========================================================================== */
/* cardX Guest V2.0 – PreCheck-Vorlagenworkflow                              */
/* ========================================================================== */
/*
   Fachliche Hierarchie:
   1. Vorlage bearbeiten = primaere Aktion
   2. Als Vorlage speichern = optional nach einer Bearbeitung
   3. Als Standard verwenden = bewusste Dauer-Voreinstellung je Sprache
   4. Vorlage loeschen = destruktive Aktion
*/
body.cx-guest .pc-template-action,
body.cx-guest .pc-template-action [class*="dxb"] {
    border-radius: 7px !important;
    background-image: none !important;
}

body.cx-guest .pc-template-edit,
body.cx-guest .pc-template-edit [class*="dxb"] {
    border-color: var(--cxg-orange) !important;
    background: var(--cxg-orange) !important;
    color: #ffffff !important;
}

body.cx-guest .pc-template-edit:hover,
body.cx-guest .pc-template-edit:hover [class*="dxb"] {
    border-color: var(--cxg-orange-dark) !important;
    background: var(--cxg-orange-dark) !important;
    color: #ffffff !important;
}

body.cx-guest .pc-template-save,
body.cx-guest .pc-template-save [class*="dxb"] {
    border-color: #b9c9d6 !important;
    background: #ffffff !important;
    color: #31536b !important;
    box-shadow: none !important;
}

body.cx-guest .pc-template-standard,
body.cx-guest .pc-template-standard [class*="dxb"] {
    border-color: #d8b078 !important;
    background: #fffaf3 !important;
    color: #8c5b1e !important;
    box-shadow: none !important;
}

body.cx-guest .pc-template-standard:hover,
body.cx-guest .pc-template-standard:hover [class*="dxb"] {
    border-color: #c99551 !important;
    background: #fff4e4 !important;
    color: #754812 !important;
}

body.cx-guest .pc-template-delete,
body.cx-guest .pc-template-delete [class*="dxb"] {
    border-color: #dfb6b0 !important;
    background: #ffffff !important;
    color: #a64035 !important;
    box-shadow: none !important;
}

body.cx-guest .pc-template-delete:hover,
body.cx-guest .pc-template-delete:hover [class*="dxb"] {
    border-color: #d89890 !important;
    background: #fff3f1 !important;
    color: #8f3329 !important;
}

body.cx-guest .pc-template-card.is-standard {
    border-color: #d5a457;
}

body.cx-guest .pc-template-standard-badge {
    background: #f47c20;
}

body.cx-guest .pc-template-workflow-hint {
    padding: 7px 10px;
    border-radius: 6px;
    background: #f7f9fb;
    border: 1px solid #e4eaf0;
    color: #5b6d7b;
}

/* DevExpress deaktivierte Zustände sollen klar als "noch nicht verfügbar"
   erkennbar bleiben, z.B. Speichern vor einer Bearbeitung. */
body.cx-guest .pc-template-save[class*="dxbDisabled"],
body.cx-guest .pc-template-save [class*="dxbDisabled"],
body.cx-guest .pc-template-save[aria-disabled="true"] {
    opacity: .52 !important;
}


/* ========================================================================== */
/* cardX Guest V2.0 – Mobile-Erweiterung                                      */
/* ========================================================================== */

/* Die mobile Navigation wird in Main.master ergänzt und greift die bestehende
   Root-Master-Navigation nur als Quelle auf. Desktop bleibt unverändert. */
.cx-mobile-menu-button,
.cx-mobile-menu-panel,
.cx-mobile-menu-backdrop {
    display: none;
}

@media (max-width: 768px) {
    body.cx-guest {
        overflow-x: hidden;
    }

    body.cx-guest .contentPane,
    body.cx-guest .content {
        padding: 10px 8px 18px !important;
    }

    /* Die Desktop-Menüzeile wird mobil durch das kompakte Menü ersetzt. */
    body.cx-guest .headerMenu {
        display: none !important;
    }

    body.cx-guest .headerNavContainer {
        min-height: 0 !important;
        height: 0 !important;
        overflow: visible !important;
        border: 0 !important;
    }

    .cx-mobile-menu-button {
        display: inline-flex;
        position: fixed;
        top: 14px;
        right: 12px;
        z-index: 12010;
        align-items: center;
        gap: 7px;
        min-height: 40px;
        padding: 0 13px;
        border: 1px solid #cbd7e2;
        border-radius: 8px;
        background: #fff;
        color: #27445a;
        box-shadow: 0 4px 14px rgba(39, 63, 82, .14);
        font: 600 14px "Segoe UI", Arial, sans-serif;
        cursor: pointer;
    }

    .cx-mobile-menu-icon {
        font-size: 19px;
        line-height: 1;
    }

    .cx-mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 12020;
        background: rgba(27, 42, 54, .38);
    }

    .cx-mobile-menu-panel {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 12030;
        width: min(330px, 88vw);
        padding: 0 0 18px;
        overflow-y: auto;
        background: #fff;
        box-shadow: -10px 0 30px rgba(20, 43, 58, .20);
    }

    .cx-mobile-menu-panel[hidden],
    .cx-mobile-menu-backdrop[hidden] {
        display: none !important;
    }

    .cx-mobile-menu-head {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 1;
        align-items: center;
        justify-content: space-between;
        min-height: 58px;
        padding: 0 14px 0 18px;
        border-bottom: 1px solid #e2e8ee;
        background: #f8fafc;
        color: #2c4559;
    }

    .cx-mobile-menu-close {
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: #53697b;
        font-size: 28px;
        cursor: pointer;
    }

    .cx-mobile-menu-items {
        padding: 8px;
    }

    .cx-mobile-menu-item {
        display: block;
        width: 100%;
        min-height: 46px;
        margin: 0 0 4px;
        padding: 10px 12px;
        border: 0;
        border-radius: 7px;
        background: #fff;
        color: #334a5e;
        font: 500 15px "Segoe UI", Arial, sans-serif;
        text-align: left;
        cursor: pointer;
    }

    .cx-mobile-menu-item:hover,
    .cx-mobile-menu-item:focus {
        background: var(--cxg-orange-soft);
        color: var(--cxg-orange-dark);
        outline: none;
    }

    body.cx-mobile-menu-open {
        overflow: hidden !important;
    }

    /* ---------------------------------------------------------------------- */
    /* cardXaccess                                                            */
    /* ---------------------------------------------------------------------- */
    body.cx-guest .cx-cardxaccess-mobile {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.cx-guest .cx-cardxaccess-mobile [class*="dxflGroupBox"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [class*="dxflCaptionCell"] {
        padding-bottom: 4px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [class*="dxflNestedControlCell"] {
        padding-bottom: 9px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [id*="ASPxFormLayout1_Pos"],
    body.cx-guest .cx-cardxaccess-mobile [id*="ASPxFormLayout1_Service"],
    body.cx-guest .cx-cardxaccess-mobile [id*="ASPxFormLayout1_Kartennummer"],
    body.cx-guest .cx-cardxaccess-mobile [id*="ASPxComboBoxKameras"] {
        max-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [id*="ASPxFormLayout1_Kartennummer"] input,
    body.cx-guest .cx-cardxaccess-mobile input[id*="ASPxFormLayout1_Kartennummer"] {
        min-height: 44px !important;
        font-size: 18px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action,
    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
        min-height: 44px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [id*="ASPxFormLayout1_Check"] {
        display: flex !important;
        align-items: center;
        box-sizing: border-box;
        width: 100% !important;
        min-height: 62px !important;
        padding: 10px 12px !important;
        border: 1px solid #d9e3ea;
        border-radius: 8px;
        background: #f8fafc;
        font-size: 17px !important;
        line-height: 1.35;
    }

    body.cx-guest .cx-cardxaccess-mobile #previewContainer,
    body.cx-guest .cx-cardxaccess-mobile #quaggaContainer {
        max-width: 100% !important;
    }

    body.cx-guest .cx-cardxaccess-mobile #previewContainer > video {
        max-width: 100% !important;
        max-height: 42vh;
    }

    body.cx-guest .cx-cardxaccess-mobile .manualInputPreviewBox {
        top: 6px;
    }

    /* ---------------------------------------------------------------------- */
    /* Meldeschein-Popup: mobil wie eine Seite statt wie ein Desktop-Fenster. */
    /* ---------------------------------------------------------------------- */
    body.cx-guest .cx-melde-popup {
        left: 0 !important;
        top: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxpc-mainDiv"],
    body.cx-guest .cx-melde-popup [class*="dxpc-content"] {
        max-width: 100vw !important;
        width: 100vw !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxpc-header"] {
        position: sticky;
        top: 0;
        z-index: 30;
        min-height: 48px;
        padding: 10px 12px !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(39, 63, 82, .10);
        font-size: 17px !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxpc-content"] {
        max-height: calc(100dvh - 50px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 8px 8px 78px !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxflGroupBox"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxflNestedControlCell"] input,
    body.cx-guest .cx-melde-popup [class*="dxeButtonEdit"],
    body.cx-guest .cx-melde-popup [class*="dxeTextBox"] {
        min-height: 40px;
    }

    body.cx-guest .cx-melde-popup .melde-tabs-form [class*="dxtc-tab"] {
        box-sizing: border-box !important;
        width: 50% !important;
        max-width: 50vw;
        white-space: normal !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    body.cx-guest .cx-melde-popup .melde-tabs-form [class*="dxtc-tab"] * {
        white-space: normal !important;
        font-size: 13px !important;
    }

    body.cx-guest .cx-melde-popup-actions {
        position: sticky !important;
        bottom: 0;
        z-index: 40;
        box-sizing: border-box;
        width: 100% !important;
        margin-top: 10px;
        padding: 7px 4px 5px !important;
        border-top: 1px solid #dce5ec;
        background: rgba(255,255,255,.97) !important;
        box-shadow: 0 -4px 14px rgba(39, 63, 82, .10);
    }

    body.cx-guest .cx-melde-popup-actions .cx-melde-action {
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 8px !important;
    }

    body.cx-guest .cx-melde-popup-actions .cx-melde-action img {
        max-width: 24px !important;
        max-height: 24px !important;
    }

    /* Meldescheinübersicht: auf Smartphones Filter und Zellen kompakter. */
    body.cx-guest .cx-guest-main-grid [class*="dxgvHeader"] td,
    body.cx-guest .cx-guest-main-grid [class*="dxgvDataRow"] td,
    body.cx-guest .cx-guest-main-grid [class*="dxgvFilterRow"] td {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

@media (max-width: 480px) {
    .cx-mobile-menu-button {
        top: 12px;
        right: 8px;
        min-height: 38px;
        padding: 0 11px;
    }

    body.cx-guest .cx-melde-popup [class*="dxpc-content"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [class*="dxflGroupBox"] {
        border-left-width: 0 !important;
        border-right-width: 0 !important;
        border-radius: 0 !important;
    }
}


/* ========================================================================== */
/* cardX Guest V2.1 – Mobile-Korrekturen nach Praxistest                      */
/* ========================================================================== */
@media (max-width: 768px) {
    /* cardXaccess: Scanner/Eingabe/NFC und Folgeaktionen als kompakte Leiste. */
    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action,
    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
        min-height: 38px !important;
        height: 38px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action img,
    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action img {
        width: 14px !important;
        height: 14px !important;
        margin-right: 3px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [class*="dxflNestedControlCell"] {
        padding-bottom: 5px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [id*="ASPxFormLayout1_Check"] {
        min-height: 48px !important;
        padding: 7px 9px !important;
        font-size: 15px !important;
    }

    /* Meldeschein: das Popup selbst darf scrollen. Das ist absichtlich doppelt
       zum DevExpress ScrollBars=Auto abgesichert, weil der Browser je nach
       Callback unterschiedliche dxpc-Wrapper erzeugt. */
    body.cx-guest .cx-melde-popup {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain;
        touch-action: pan-y !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxpc-mainDiv"] {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxpc-content"] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 5px !important;
        padding-bottom: 68px !important;
        touch-action: pan-y !important;
    }

    /* Das Reiseformular war im ersten Versuch zu groß. */
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [class*="dxflGroupBox"] {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    body.cx-guest .cx-melde-popup .cx-melde-travel-form [class*="dxflCaptionCell"] {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        font-size: 12px !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxeButtonEdit"],
    body.cx-guest .cx-melde-popup [class*="dxeTextBox"],
    body.cx-guest .cx-melde-popup [class*="dxeSpinEdit"] {
        min-height: 34px !important;
    }

    body.cx-guest .cx-melde-popup input {
        min-height: 32px !important;
        font-size: 13px !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxflGroupBox"] {
        margin-top: 5px !important;
        margin-bottom: 7px !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxflGroupBoxCaption"] {
        font-size: 13px !important;
    }

    /* Meldescheinliste: die adaptive Detaildarstellung bleibt einklappbar;
       der sichtbare Teil wird wie eine kompakte Zeile behandelt. */
    body.cx-guest .cx-guest-main-grid [class*="dxgvAdaptiveDetailRow"] td,
    body.cx-guest .cx-guest-main-grid [class*="dxgvAdaptiveDetailCell"] {
        padding: 7px 9px !important;
        font-size: 12px !important;
    }

    body.cx-guest .cx-guest-main-grid [class*="dxgvDataRow"] td {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
        font-size: 12px !important;
    }

    body.cx-guest .cx-guest-main-grid [class*="dxgvHeader"] td {
        padding: 6px 5px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action,
    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
        font-size: 11px !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxpc-header"] {
        min-height: 40px !important;
        padding: 7px 9px !important;
        font-size: 15px !important;
    }
}


/* ========================================================================== */
/* cardX Guest V2.2 – Mobile Feinschliff                                      */
/* ========================================================================== */
@media (max-width: 768px) {
    /* Das mobile Menü liegt nun direkt unter body und kann nicht mehr durch
       Header-/Content-Wrapper mit eigenem Stacking-Kontext verdeckt werden. */
    body.cx-guest .cx-mobile-menu-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Während ein Meldeschein modal bearbeitet wird, gibt es bewusst keine
       globale Navigation. So kann der Benutzer den offenen Vorgang nicht
       versehentlich verlassen. */
    body.cx-mobile-menu-suppressed .cx-mobile-menu-button {
        display: none !important;
    }

    /* Reisedaten: drei kompakte Felder in einer Zeile. Die Datumfelder bekommen
       mehr Platz, Nächte bleibt bewusst schmal. */
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagVonGepl"],
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagBisGepl"],
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagAb"],
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagBis"] {
        min-width: 108px !important;
    }

    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="NaechteGepl"],
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="Naechte"] {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
    }

    /* Auf dem Telefon sind die Hoch/Runter-Schaltflächen des SpinEdit unnötig
       groß. Die Nächte werden weiterhin direkt eingegeben und durch die
       bestehende ValueChanged-Logik verarbeitet. */
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="Naechte"] [class*="dxeButton"],
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="NaechteGepl"] [class*="dxeButton"] {
        display: none !important;
    }

    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="Naechte"] input,
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="NaechteGepl"] input {
        width: 100% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        text-align: center !important;
    }

    body.cx-guest .cx-melde-popup .cx-melde-travel-form [class*="dxflGroupBox"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Aktionsleiste: auf kleinen Displays drei Spalten statt fünf. Die zweite
       Zeile nimmt Drucken und Rechnung auf; nichts darf seitlich abgeschnitten
       werden. */
    body.cx-guest .cx-melde-popup-actions [class*="dxflGroupBox"] {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 6px !important;
    }

    body.cx-guest .cx-melde-popup-actions [class*="dxflNestedControlCell"] {
        padding: 3px !important;
        text-align: center !important;
    }

    body.cx-guest .cx-melde-popup-actions .cx-melde-action {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }

    body.cx-guest .cx-melde-popup-actions .cx-melde-action-invoice {
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    body.cx-guest .cx-melde-popup-actions .cx-melde-action img {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (max-width: 480px) {
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagVonGepl"],
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagBisGepl"],
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagAb"],
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagBis"] {
        min-width: 96px !important;
        font-size: 12px !important;
    }

    body.cx-guest .cx-melde-popup .cx-melde-travel-form [class*="dxflCaptionCell"] {
        font-size: 11px !important;
        white-space: nowrap !important;
    }
}

/* ========================================================================== */
/* cardX Guest V2.3 – Mobile/Desktop Layout-Korrekturen                       */
/* ========================================================================== */

/* cardXaccess: auf großen Monitoren nicht mehr über die komplette Breite
   auseinanderziehen. Der Arbeitsbereich bleibt bewusst kompakt und mittig. */
body.cx-guest .cx-cardxaccess-mobile {
    width: min(860px, calc(100% - 32px));
    margin: 14px auto 28px auto;
    box-sizing: border-box;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-check-group {
    width: 100% !important;
}

/* Primäre und sekundäre Aktionen erhalten auch am Desktop eine vernünftige
   Maximalbreite statt sich über einen Full-HD-Monitor zu verteilen. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action {
    min-width: 0 !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
    min-width: 0 !important;
}

@media (max-width: 768px) {
    body.cx-guest .cx-cardxaccess-mobile {
        width: 100%;
        margin: 0;
        padding: 8px 10px 18px 10px;
    }

    /* cardXaccess: enge, aber klar getrennte Buttonleisten. */
    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 12px !important;
        padding: 0 4px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 9px !important;
        padding: 0 2px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action img {
        width: 12px !important;
        height: 12px !important;
        margin-right: 2px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [class*="dxflNestedControlCell"] {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [class*="dxflGroupBox"] {
        box-sizing: border-box !important;
    }

    /* Reisedaten: echte 42/16/42-Aufteilung, Nächte ohne Spinner-Pfeile. */
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="Naechte"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="Naechte"] input {
        text-align: center !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="Naechte"] [class*="dxeButton"] {
        display: none !important;
    }

    /* Popup-Aktionen: fünf kompakte Aktionen in EINER Zeile. Nicht mehr als
       großer zweizeiliger Block über den Eingabefeldern. */
    body.cx-guest .cx-melde-popup-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 50 !important;
        padding: 5px 6px !important;
        background: rgba(255,255,255,.98) !important;
        border-top: 1px solid #dce5ec !important;
        box-shadow: 0 -3px 10px rgba(39,63,82,.08) !important;
    }

    body.cx-guest .cx-melde-popup-actions [class*="dxflGroupBox"] {
        padding: 3px !important;
        margin: 0 !important;
    }

    body.cx-guest .cx-melde-popup-actions [class*="dxflNestedControlCell"] {
        padding: 2px !important;
    }

    body.cx-guest .cx-melde-popup-actions .cx-melde-action {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 2px !important;
        border-radius: 7px !important;
    }

    body.cx-guest .cx-melde-popup-actions .cx-melde-action img {
        width: 18px !important;
        height: 18px !important;
    }

    body.cx-guest .cx-melde-popup-actions .cx-melde-action-invoice {
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    /* Mitreisende: auf dem Smartphone nur die für die Übersicht wichtigen
       Spalten. Alle Detaildaten bleiben im Bearbeiten-Formular erreichbar. */
    body.cx-guest .cx-melde-popup .cx-mit-mobile-hide {
        display: none !important;
    }

    body.cx-guest .cx-melde-popup [id*="ASPxGridViewMitGrid"] [class*="dxgvHeader"] td,
    body.cx-guest .cx-melde-popup [id*="ASPxGridViewMitGrid"] [class*="dxgvDataRow"] td {
        padding: 6px 5px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    body.cx-guest .cx-melde-popup [id*="ASPxGridViewMitGrid"] [class*="dxgvToolbar"] {
        white-space: normal !important;
    }
}

@media (max-width: 480px) {
    body.cx-guest .cx-cardxaccess-mobile {
        padding-left: 6px;
        padding-right: 6px;
    }

    body.cx-guest .cx-melde-popup .cx-melde-travel-form [class*="dxflCaptionCell"] {
        font-size: 10px !important;
    }

    body.cx-guest .cx-melde-popup-actions .cx-melde-action-invoice {
        font-size: 8px !important;
    }
}


.cx-melde-menu-button { display: none; }

/* ========================================================================== */
/* cardX Guest V2.4 – Mobile Stabilisierung / kompaktere Arbeitsabläufe        */
/* ========================================================================== */

/* cardXaccess ist eine Arbeitsmaske und soll am Desktop links unter der
   Navigation beginnen statt wie ein Dialog in der Bildschirmmitte zu schweben. */
body.cx-guest .cx-cardxaccess-mobile {
    width: min(980px, calc(100% - 48px));
    margin: 18px 24px 28px 24px;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action {
    max-width: 170px !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
    max-width: 180px !important;
}

@media (max-width: 768px) {
    /* Meldescheinliste: eigener, robuster Menüzugang. Das Master-Menü wird auf
       dieser Seite bewusst durch den seiteneigenen Trigger ersetzt. */
    body.cx-melde-page .cx-mobile-menu-button {
        display: none !important;
    }

    body.cx-melde-page .cx-melde-menu-button {
        display: inline-flex !important;
    }

    body.cx-melde-page.cx-mobile-menu-suppressed .cx-melde-menu-button {
        display: none !important;
    }

    .cx-melde-menu-button {
        position: fixed;
        top: 14px;
        right: 12px;
        z-index: 12011;
        align-items: center;
        gap: 7px;
        min-height: 40px;
        padding: 0 13px;
        border: 1px solid #cbd7e2;
        border-radius: 8px;
        background: #fff;
        color: #27445a;
        box-shadow: 0 4px 14px rgba(39, 63, 82, .14);
        font: 600 14px "Segoe UI", Arial, sans-serif;
        cursor: pointer;
    }

    /* Reisedaten: auf Mobilgeräten ist Anreise/Abreise die primäre Beziehung.
       Nächte steht kompakt darunter statt zwischen zwei abgeschnittenen Daten. */
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagVonGepl"],
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagBisGepl"],
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagAb"],
    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="TagBis"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body.cx-guest .cx-melde-popup .cx-melde-travel-form [id*="Naechte"] {
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
    }

    body.cx-guest .cx-melde-popup .cx-melde-travel-form [class*="dxflCaptionCell"] {
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* Mitreisende: die Liste ist nur eine Übersicht. Auf dem Telefon reichen
       Aktion, Vorname, Name und Geburtsdatum; Details gehören ins Edit-Formular. */
    body.cx-guest .cx-melde-popup [id*="ASPxGridViewMitGrid"] {
        width: 100% !important;
    }

    body.cx-guest .cx-melde-popup [id*="ASPxGridViewMitGrid"] [class*="dxgvHeader"] td,
    body.cx-guest .cx-melde-popup [id*="ASPxGridViewMitGrid"] [class*="dxgvDataRow"] td {
        padding: 7px 4px !important;
        font-size: 11px !important;
    }

    /* Die fünf Meldeschein-Aktionen bleiben zuverlässig in einer Zeile. */
    body.cx-guest .cx-melde-popup-actions [class*="dxflGroupBox"] > table,
    body.cx-guest .cx-melde-popup-actions [class*="dxflGroupBox"] table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    body.cx-guest .cx-melde-popup-actions .cx-melde-action {
        max-width: none !important;
        width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    /* cardXaccess: weniger Weißraum, primäre Aktionen 3er-Reihe, sekundäre
       Aktionen in einem gut bedienbaren 2x2-Raster statt gequetschter 4er-Reihe. */
    body.cx-guest .cx-cardxaccess-mobile {
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 8px 16px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action {
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 12px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-check-group > [class*="dxflGroupBox"] {
        padding-bottom: 4px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 10px !important;
    }

    /* DevExpress erzeugt vier Spalten im Aktionen-Group. Zwei Spalten sind auf
       390–440 px deutlich lesbarer; die vorhandenen Buttons bleiben unverändert. */
    body.cx-guest .cx-cardxaccess-mobile .cx-access-actions-mobile [class*="dxflGroupBox"] table {
        width: 100% !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [id*="ASPxFormLayout1_Check"] {
        min-height: 42px !important;
        height: auto !important;
    }
}

@media (max-width: 480px) {
    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
        font-size: 9px !important;
    }
}

/* ========================================================================== */
/* cardX Guest V2.6 – Mobile viewport + cardXaccess Button-Hierarchie          */
/* ========================================================================== */

@media (max-width: 768px) {
    /* Der Master-Trigger ist jetzt auch auf Melde1V2 der einzige Menüknopf.
       Dadurch sitzt er direkt unter body und kann nicht von Content-Panes,
       transformierten DevExpress-Containern oder Popup-Wrappern versetzt werden. */
    body.cx-melde-page .cx-mobile-menu-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.cx-melde-page.cx-mobile-menu-suppressed .cx-mobile-menu-button {
        display: none !important;
    }

    .cx-melde-menu-button {
        display: none !important;
    }

    /* Ein unsichtbares 1024px-Popup darf die Dokumentbreite nicht mehr
       vergrößern. Das verhindert sowohl horizontales Scrollen während des
       Popups als auch das verschobene Layout nach dem Schließen. */
    html,
    body.cx-melde-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.cx-melde-page .contentPane,
    body.cx-melde-page .mainContentPane,
    body.cx-melde-page form {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.cx-guest .cx-melde-popup {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        left: 8px !important;
        right: auto !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body.cx-guest .cx-melde-popup [class*="dxpc-mainDiv"],
    body.cx-guest .cx-melde-popup [class*="dxpc-content"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body.cx-guest .cx-melde-popup .cx-melde-travel-form,
    body.cx-guest .cx-melde-popup .melde-tabs-form,
    body.cx-guest .cx-melde-popup .cx-melde-popup-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Die feste Menü-/Aktionslogik darf selbst bei geöffneten DropDowns keine
       zweite horizontale Scrollachse im Dokument erzeugen. */
    html.cx-melde-modal-open,
    html.cx-melde-modal-open body {
        overflow-x: hidden !important;
    }

    /* cardXaccess: Icon oberhalb, Beschriftung darunter. Das gibt jedem Button
       weniger horizontale Mindestbreite und wirkt auf Touch-Geräten ruhiger. */
    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action,
    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
        text-align: center !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action {
        height: 56px !important;
        min-height: 56px !important;
        font-size: 11px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
        height: 54px !important;
        min-height: 54px !important;
        font-size: 10px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action img,
    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action img {
        display: block !important;
        margin: 0 auto 3px auto !important;
        width: 18px !important;
        height: 18px !important;
    }
}

@media (min-width: 769px) {
    /* Auch am Desktop bilden Icon und Text eine kompakte vertikale Einheit.
       Dadurch können die Aktionsspalten schmaler bleiben. */
    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action,
    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
        height: 56px !important;
        min-height: 56px !important;
        text-align: center !important;
        line-height: 1.1 !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action img,
    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action img {
        display: block !important;
        margin: 0 auto 3px auto !important;
    }
}


/* ========================================================================== */
/* cardX Guest V2.7 – Verdichtung cardXaccess / Mitreisende                  */
/* ========================================================================== */

/* POS bleibt technisch eine ComboBox, damit die vorhandene Serverlogik
   unveraendert bleibt. Fuer den Anwender ist sie jedoch reine Anzeige. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-display {
    font-weight: 600 !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-display [class*="dxeButton"],
body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-display [class*="dxeButtonEditButton"] {
    display: none !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-display,
body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-display [class*="dxeEditArea"] {
    background: #f8fafc !important;
    cursor: default !important;
}

/* Die Arbeitsmaske ist fuer viele aufeinanderfolgende Checks gedacht.
   Deshalb vertikal etwas dichter, ohne die Touch-Ziele zu verkleinern. */
body.cx-guest .cx-cardxaccess-mobile [class*="dxflCaptionCell"] {
    padding-top: 1px !important;
    padding-bottom: 2px !important;
}

body.cx-guest .cx-cardxaccess-mobile [class*="dxflNestedControlCell"] {
    padding-top: 1px !important;
    padding-bottom: 5px !important;
}

body.cx-guest .cx-cardxaccess-mobile [class*="dxflGroupBox"] {
    margin-top: 4px !important;
    margin-bottom: 7px !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-check-group [class*="dxflGroupBox"] {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Mitreisende: keine DevExpress-Adaptive-Karten mehr. Auf Mobil bleiben nur
   Aktionen, Vorname, Name und Geburtsdatum als kompakte Tabellenzeile stehen. */
@media (max-width: 768px) {
    body.cx-guest .cx-melde-popup .cx-mit-grid {
        width: 100% !important;
        overflow: hidden !important;
    }

    body.cx-guest .cx-melde-popup .cx-mit-grid table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    body.cx-guest .cx-melde-popup .cx-mit-grid .cx-mit-mobile-hide {
        display: none !important;
    }

    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxgvHeader"] td,
    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxgvDataRow"] td {
        padding: 7px 5px !important;
        font-size: 11px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxgvHeader"] td:first-child,
    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxgvDataRow"] td:first-child {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    /* Toolbar des Mitreisenden-Grids darf umbrechen, aber nicht horizontal
       ueber das Popup hinausragen. */
    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxgvToolbar"],
    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxtbControl"] {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: hidden !important;
    }
}

@media (max-width: 480px) {
    body.cx-guest .cx-cardxaccess-mobile [class*="dxflCaptionCell"] {
        font-size: 12px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile [class*="dxflNestedControlCell"] {
        padding-bottom: 4px !important;
    }
}


/* ========================================================================== */
/* cardX Guest V2.8 – Mitreisende-Workflow / kompakte POS-Anzeige            */
/* ========================================================================== */

/* POS ist Kontext, keine Auswahl. Service bleibt bewusst eine echte Auswahl,
   weil ein POS mehrere Leistungen anbieten kann. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-display,
body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-display [class*="dxeEditArea"] {
    min-height: 28px !important;
    height: 28px !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-display {
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-display [class*="dxeEditArea"] {
    padding-left: 2px !important;
    padding-right: 2px !important;
    background: transparent !important;
    color: #405467 !important;
    font-weight: 600 !important;
}

/* Die beiden Kontextzeilen etwas enger zusammenrücken; Service bleibt normal
   bedienbar und behält seinen Dropdown-Button. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-item [class*="dxflNestedControlCell"] {
    padding-bottom: 2px !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-service-item [class*="dxflNestedControlCell"] {
    padding-bottom: 4px !important;
}

/* Rechnung: auf kleinen Displays nur noch ein kompaktes Euro-Symbol. Die
   Bedeutung bleibt über den Tooltip erhalten und der Button kann nicht mehr
   aus der Fünferleiste herauslaufen. */
body.cx-guest .cx-melde-popup-actions .cx-melde-action-invoice {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    overflow: hidden !important;
}

/* Der zusätzliche Button ist nur auf schmalen Displays sichtbar. Desktop
   behält die vollständige DevExpress-Toolbar inkl. Gruppenanlage. */
body.cx-guest .cx-mit-mobile-addbar {
    display: none;
}

@media (max-width: 768px) {
    body.cx-guest .cx-mit-mobile-addbar {
        display: block !important;
        margin: 2px 0 10px 0 !important;
        width: 100% !important;
    }

    body.cx-guest .cx-mit-mobile-addbutton {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 7px !important;
        border-color: var(--cxg-orange) !important;
        background: var(--cxg-orange) !important;
        color: #fff !important;
        font-weight: 600 !important;
    }

    body.cx-guest .cx-mit-mobile-addbutton img {
        width: 16px !important;
        height: 16px !important;
        margin-right: 6px !important;
    }

    /* Die Desktop-Toolbar war auf Smartphones die Ursache für die große leere
       Fläche und die kaum verständlichen Mini-Icons. Mobil wird sie vollständig
       ersetzt durch den eindeutigen Button oben. */
    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxgvToolbar"],
    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxtbControl"],
    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxmLite"] {
        display: none !important;
    }

    /* Leere Mitreisendenliste soll direkt unter dem Add-Button enden und keine
       künstlich hohe Arbeitsfläche erzeugen. */
    body.cx-guest .cx-melde-popup .cx-mit-grid,
    body.cx-guest .cx-melde-popup .cx-mit-grid > div,
    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxgvControl"] {
        min-height: 0 !important;
        height: auto !important;
    }

    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxgvEmptyDataRow"] td {
        height: 54px !important;
        min-height: 54px !important;
        padding: 12px 6px !important;
    }

    /* Tabelle der vorhandenen Mitreisenden kompakt halten. */
    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxgvHeader"] td,
    body.cx-guest .cx-melde-popup .cx-mit-grid [class*="dxgvDataRow"] td {
        height: 36px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* Euro-Button nutzt dieselbe quadratische Fläche wie die vier Iconbuttons. */
    body.cx-guest .cx-melde-popup-actions .cx-melde-action-invoice {
        font-size: 20px !important;
        white-space: normal !important;
    }
}
\n\n/* ==========================================================================\n   cardX Guest V8.3 – Scan-Zähler cardXaccess\n   ========================================================================== */\nbody.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-item [class*="dxflNestedControlCell"] {\n    padding-top: 2px !important;\n    padding-bottom: 4px !important;\n}\n\nbody.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    min-height: 32px;\n    padding: 2px 4px 2px 10px;\n    border: 1px solid #d8e2ea;\n    border-radius: 18px;\n    background: #f8fafc;\n    color: #42566a;\n    box-sizing: border-box;\n}\n\nbody.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-caption {\n    font-size: 12px;\n    font-weight: 600;\n}\n\nbody.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-value {\n    display: inline-flex !important;\n    align-items: center;\n    justify-content: center;\n    min-width: 32px;\n    height: 26px;\n    padding: 0 8px;\n    border-radius: 13px;\n    background: var(--cxg-orange);\n    color: #fff !important;\n    font-size: 14px !important;\n    font-weight: 700 !important;\n    line-height: 26px !important;\n    box-sizing: border-box;\n}\n\nbody.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset,\nbody.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset [class*="dxb"] {\n    min-width: 34px !important;\n    width: 34px !important;\n    height: 30px !important;\n    padding: 0 !important;\n    border-radius: 15px !important;\n    background: #fff !important;\n    border-color: #cbd7e2 !important;\n    box-shadow: none !important;\n}\n\n@media (max-width: 640px) {\n    body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter {\n        margin-top: -2px;\n    }\n}\n

/* ==========================================================================
   cardX Guest V8.4 – kompakter Gruppenzähler cardXaccess
   ========================================================================== */
body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-item [class*="dxflNestedControlCell"] {
    padding-top: 2px !important;
    padding-bottom: 0 !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 2px 0 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-caption {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #42566a !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset,
body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset [class*="dxb"] {
    min-width: 48px !important;
    width: 48px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 1px solid var(--cxg-orange) !important;
    border-radius: 17px !important;
    background: var(--cxg-orange) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset:hover,
body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset:hover [class*="dxb"] {
    background: var(--cxg-orange-dark) !important;
    border-color: var(--cxg-orange-dark) !important;
}

@media (max-width: 640px) {
    body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter {
        margin-top: 0 !important;
        padding-right: 4px !important;
    }
}


/* ========================================================================== */
/* cardX Guest V8.5 – Kartennummer + integrierter Gruppenzähler               */
/* ========================================================================== */

/* Das obere Kartennummernfeld soll dieselbe ruhige Kartenoptik wie die
   Eingabevorschau darunter bekommen, bleibt aber ein echtes Eingabefeld. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-cardnumber-input,
body.cx-guest .cx-cardxaccess-mobile .cx-access-cardnumber-input [class*="dxeTextBox"] {
    border-color: #d0d9e1 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(39, 63, 82, .08) !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-cardnumber-input input,
body.cx-guest .cx-cardxaccess-mobile input.cx-access-cardnumber-input {
    min-height: 42px !important;
    padding: 6px 10px !important;
    background: #f8fafc !important;
    color: #202f3b !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-cardnumber-input[class*="dxeFocused"],
body.cx-guest .cx-cardxaccess-mobile .cx-access-cardnumber-input:focus-within {
    border-color: var(--cxg-blue) !important;
    box-shadow: 0 0 0 2px rgba(22, 130, 184, .12), 0 2px 8px rgba(39, 63, 82, .08) !important;
}

/* Kartennummer und Zähler teilen sich eine Zeile: 2/3 zu 1/3. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-item [class*="dxflNestedControlCell"] {
    padding-left: 8px !important;
    padding-bottom: 9px !important;
    vertical-align: bottom !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset,
body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset [class*="dxb"] {
    width: 100% !important;
    min-width: 78px !important;
    height: 44px !important;
    padding: 0 8px !important;
    border: 1px solid var(--cxg-orange) !important;
    border-radius: 9px !important;
    background: var(--cxg-orange) !important;
    color: #fff !important;
    box-shadow: 0 2px 7px rgba(39, 63, 82, .08) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset:hover,
body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset:hover [class*="dxb"] {
    background: var(--cxg-orange-dark) !important;
    border-color: var(--cxg-orange-dark) !important;
}

@media (max-width: 640px) {
    body.cx-guest .cx-cardxaccess-mobile .cx-access-cardnumber-item [class*="dxflCaptionCell"] {
        padding-bottom: 4px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-cardnumber-input input,
    body.cx-guest .cx-cardxaccess-mobile input.cx-access-cardnumber-input {
        font-size: 18px !important;
        letter-spacing: .8px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset,
    body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset [class*="dxb"] {
        min-width: 72px !important;
        font-size: 11px !important;
        padding: 0 5px !important;
    }
}


/* ==========================================================================
   cardX Guest V8.6 – zweizeiliger kompakter Scan-Zähler
   ========================================================================== */
body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-item [class*="dxflNestedControlCell"] {
    padding-left: 8px !important;
    padding-bottom: 8px !important;
    vertical-align: bottom !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset {
    position: relative !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 56px !important;
    padding: 20px 4px 3px !important;
    border-radius: 10px !important;
    background: var(--cxg-orange) !important;
    border-color: var(--cxg-orange) !important;
    color: #fff !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 7px rgba(39, 63, 82, .10) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    text-align: center !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset::before {
    content: "Zähler";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 7px;
    color: #fff;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 13px;
    text-align: center;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset [class*="dxb"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    padding: 0 !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset:hover {
    background: var(--cxg-orange-dark) !important;
    border-color: var(--cxg-orange-dark) !important;
}

@media (max-width: 640px) {
    body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset {
        width: 66px !important;
        min-width: 66px !important;
        height: 54px !important;
        padding-top: 19px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset::before {
        top: 6px;
        font-size: 10px;
    }
}


/* ==========================================================================
   cardX Guest V8.7 – Zähler exakt auf Höhe des Kartennummernfeldes
   ========================================================================== */
body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-item [class*="dxflNestedControlCell"] {
    padding-left: 8px !important;
    padding-bottom: 8px !important;
    vertical-align: bottom !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset {
    width: 72px !important;
    min-width: 72px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 15px 4px 2px !important;
    border-radius: 9px !important;
    font-size: 18px !important;
    line-height: 20px !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset::before {
    top: 4px !important;
    font-size: 10px !important;
    line-height: 11px !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset [class*="dxb"] {
    height: auto !important;
    min-height: 0 !important;
    font-size: 18px !important;
    line-height: 20px !important;
    padding: 0 !important;
}

/* ==========================================================================
   cardX Guest V8.8 – Zähler schmaler und exakt am Kartennummernfeld ausgerichtet
   ========================================================================== */
body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-item [class*="dxflNestedControlCell"] {
    padding-left: 6px !important;
    padding-bottom: 14px !important;
    vertical-align: bottom !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 15px 2px 2px !important;
    border-radius: 8px !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset::before {
    left: 2px !important;
    right: 2px !important;
    top: 4px !important;
    font-size: 9px !important;
    line-height: 10px !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset [class*="dxb"] {
    font-size: 17px !important;
    line-height: 19px !important;
}

@media (max-width: 640px) {
    body.cx-guest .cx-cardxaccess-mobile .cx-access-scan-counter-reset {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
    }
}

/* ==========================================================================
   cardX Guest V9.0 – cardXaccess Polishing
   ========================================================================== */

/* Desktop: kompakte Arbeitsbreite statt weit auseinandergezogener Controls. */
@media (min-width: 769px) {
    body.cx-guest .cx-cardxaccess-mobile {
        width: min(760px, calc(100% - 64px)) !important;
        margin: 14px 0 28px 32px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action {
        height: 50px !important;
        min-height: 50px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
        height: 46px !important;
        min-height: 46px !important;
    }
}

/* Hauptaktionen immer als gleichwertige Dreiergruppe. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action-item {
    width: 33.333% !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action-item [class*="dxflNestedControlCell"] {
    text-align: center !important;
    padding-top: 2px !important;
    padding-bottom: 6px !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action {
    width: 84px !important;
    max-width: 84px !important;
    margin: 0 auto !important;
}

/* Leere Status-/Preview-Zeilen dürfen im Ruhezustand keinen großen Weißraum erzeugen. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-status-item [class*="dxflNestedControlCell"],
body.cx-guest .cx-cardxaccess-mobile .cx-access-preview-item [class*="dxflNestedControlCell"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-status-item:has([class*="dxeBase"]:empty),
body.cx-guest .cx-cardxaccess-mobile .cx-access-preview-item:has(#previewContainer:empty) {
    min-height: 0 !important;
}

/* Check gehört direkt zum Scanvorgang und rückt näher an die Hauptaktionen. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-check-item [class*="dxflCaptionCell"] {
    padding-top: 6px !important;
    padding-bottom: 3px !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-check-item [class*="dxflNestedControlCell"] {
    padding-top: 0 !important;
    padding-bottom: 6px !important;
}

/* Sekundäraktionen etwas ruhiger als die eigentlichen Scan-Aktionen. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
    height: 46px !important;
    min-height: 46px !important;
    font-size: 9px !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action img {
    width: 16px !important;
    height: 16px !important;
    margin-bottom: 2px !important;
}

/* Kamera ist mobil eine seltene Einstellung und standardmäßig eingeklappt. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-camera-toggle-item {
    display: none !important;
}

@media (max-width: 768px) {
    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action {
        width: 78px !important;
        max-width: 78px !important;
        height: 52px !important;
        min-height: 52px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-secondary-action {
        height: 46px !important;
        min-height: 46px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-camera-toggle-item {
        display: table-cell !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-camera-toggle-item [class*="dxflNestedControlCell"] {
        padding-top: 4px !important;
        padding-bottom: 2px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-camera-toggle {
        appearance: none;
        border: 0;
        background: transparent;
        color: #42566a;
        font-family: "Segoe UI", Arial, sans-serif;
        font-size: 12px;
        font-weight: 600;
        padding: 5px 3px;
        cursor: pointer;
    }

    body.cx-guest .cx-cardxaccess-mobile:not(.cx-camera-open) .cx-access-camera-select-item,
    body.cx-guest .cx-cardxaccess-mobile:not(.cx-camera-open) .cx-access-camera-reset-item {
        display: none !important;
    }

    body.cx-guest .cx-cardxaccess-mobile.cx-camera-open .cx-access-camera-select-item,
    body.cx-guest .cx-cardxaccess-mobile.cx-camera-open .cx-access-camera-reset-item {
        display: table-cell !important;
    }

    /* Mobile Gesamtverdichtung ohne kleinere Touch-Ziele. */
    body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-item [class*="dxflCaptionCell"],
    body.cx-guest .cx-cardxaccess-mobile .cx-access-service-item [class*="dxflCaptionCell"],
    body.cx-guest .cx-cardxaccess-mobile .cx-access-cardnumber-item [class*="dxflCaptionCell"] {
        padding-top: 2px !important;
        padding-bottom: 3px !important;
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-pos-item [class*="dxflNestedControlCell"],
    body.cx-guest .cx-cardxaccess-mobile .cx-access-service-item [class*="dxflNestedControlCell"],
    body.cx-guest .cx-cardxaccess-mobile .cx-access-cardnumber-item [class*="dxflNestedControlCell"] {
        padding-bottom: 4px !important;
    }
}


/* ========================================================================== */
/* cardX Guest V9.1 – NFC-Status und Kameravorschau ohne leere Layout-Zeilen   */
/* ========================================================================== */

/* NFC-Status direkt beim NFC-Button, ausschließlich wenn NFC bereit ist. */
body.cx-guest .cx-cardxaccess-mobile .cx-nfc-status-host {
    margin: 3px auto 0;
    max-width: 115px;
    text-align: center;
    line-height: 1.2;
}
body.cx-guest .cx-cardxaccess-mobile .cx-nfc-status,
body.cx-guest .cx-cardxaccess-mobile .cx-nfc-status * {
    color: #53687a !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    white-space: normal !important;
}

/* Das eigene Preview-LayoutItem ist im Ruhezustand komplett aus dem Layout.
   JS setzt .visible beim Start und entfernt es beim Beenden; damit wird nur
   bei aktivem Scan tatsächlich Platz für die Kameraansicht reserviert. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-preview-item:not(:has(#previewContainer.visible)) {
    display: none !important;
}
body.cx-guest .cx-cardxaccess-mobile .cx-access-preview-item:has(#previewContainer.visible) {
    display: table-cell;
}


/* ========================================================================== */
/* cardX Guest V9.2 – Serviceauswahl und kompakte Desktop-Scanaktionen          */
/* ========================================================================== */

/* POS bleibt reine Anzeige; Service ist bewusst sichtbar auswählbar. */
body.cx-guest .cx-cardxaccess-mobile .cx-access-service-item [class*="dxflCaptionCell"] {
    color: #2f485c !important;
    font-weight: 600 !important;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-service-choice {
    border: 1px solid #b4cbdc !important;
    border-radius: 6px !important;
    background: #fff !important;
    cursor: pointer;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-service-choice [class*="dxeButtonEditButton"] {
    min-width: 28px !important;
    background: #e8f2f9 !important;
    border-left: 1px solid #c5d9e7 !important;
    cursor: pointer;
}

body.cx-guest .cx-cardxaccess-mobile .cx-access-service-choice:hover,
body.cx-guest .cx-cardxaccess-mobile .cx-access-service-choice:focus-within {
    border-color: #1682b8 !important;
}

/* Drei Hauptaktionen auf Desktop als zusammengehörige Gruppe, ohne Eingriff
   in die dreispaltige DevExpress-FormLayout-Struktur. Verschiebung relativ zur
   vorhandenen Spaltenbreite; Mobil-Layout bleibt vollständig unberührt. */
@media (min-width: 769px) {
    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action-second {
        position: relative;
        transform: translateX(-60%);
    }

    body.cx-guest .cx-cardxaccess-mobile .cx-access-main-action-third {
        position: relative;
        transform: translateX(-120%);
    }
}