/* ===========================================================================
   mam-jahn.de - WHMCS Bestellformular
   ERZEUGTE DATEI - nicht direkt bearbeiten.
   Quelle: build/partials/00-tokens.css + 20-components.css + 40-orderform.css + 45-checkout.css
   =========================================================================== */

/* ---- Quelle: 00-tokens.css ---------------------------------------- */
/* ============================================================================
   mam-jahn.de - WHMCS Theme
   00 - Design-Tokens, Schrift, Basis
   ----------------------------------------------------------------------------
   ACHTUNG: Diese Datei ersetzt die custom.css des Eltern-Themes "nexus"
   vollständig (WHMCS lädt nur EINE custom.css und löst sie Child-zuerst auf).
   Deshalb müssen hier ALLE Variablen definiert sein, die nexus/theme.min.css
   erwartet - sonst fallen dort Farben auf "unset" zurück.
   ========================================================================== */

@font-face {
    font-family: 'Geist';
    src: url('../../../mamjahn/fonts/Geist-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Marke ---------------------------------------------------------- */
    --mj-brand:        #3b82f6;
    --mj-brand-light:  #60a5fa;
    --mj-brand-dark:   #1d4ed8;
    --mj-brand-a10:    rgba(59, 130, 246, .10);
    --mj-brand-a15:    rgba(59, 130, 246, .15);
    --mj-brand-a20:    rgba(59, 130, 246, .20);
    --mj-brand-a25:    rgba(59, 130, 246, .25);
    --mj-brand-a40:    rgba(59, 130, 246, .40);
    --mj-brand-a60:    rgba(59, 130, 246, .60);

    /* ---- Flächen ------------------------------------------------------- */
    --mj-black:        #000000;
    --mj-surface:      #09090b;
    --mj-surface-2:    #0f0f12;
    --mj-surface-3:    #18181b;
    --mj-line:         #27272a;
    --mj-line-soft:    #1f1f23;
    --mj-line-strong:  #3f3f46;

    /* ---- Text ----------------------------------------------------------- */
    --mj-text:         #fafafa;
    --mj-text-2:       #d4d4d8;
    --mj-muted:        #a1a1aa;
    /* Bewusst heller als zinc-500 (#71717a): das ergab auf --mj-surface nur
       4,1:1 und lag damit unter der Schwelle von 4,5:1 für Fließtext.
       #8b8b96 kommt auf rund 5,9:1 und bleibt trotzdem klar zurückgenommen. */
    --mj-muted-2:      #8b8b96;
    --mj-on-brand:     #09090b;

    /* ---- Akzente je Produktbereich -------------------------------------- */
    --mj-acc-games:    #22c55e;
    --mj-acc-vserver:  #22c55e;
    --mj-acc-vds:      #f97316;
    --mj-acc-web:      #8b5cf6;
    --mj-acc-net:      #0ea5e9;
    --mj-acc-dedi:     #f59e0b;

    /* ---- Status --------------------------------------------------------- */
    --mj-ok:           #22c55e;
    --mj-warn:         #f59e0b;
    --mj-err:          #ef4444;
    --mj-info:         #3b82f6;

    /* ---- Form ----------------------------------------------------------- */
    --mj-r-sm:         8px;
    --mj-r-md:         14px;
    --mj-r-lg:         20px;
    --mj-r-xl:         24px;
    --mj-r-pill:       9999px;
    --mj-glow:         0 8px 30px rgba(59, 130, 246, .25);
    --mj-shadow:       0 10px 40px rgba(0, 0, 0, .6);
    --mj-font:         'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* =====================================================================
       Rückwärts-Zuordnung auf die Variablen des Eltern-Themes "nexus".
       Damit wird der große, nicht überschriebene Teil von theme.min.css
       automatisch dunkel - ohne jede Regel einzeln nachzubauen.
       ===================================================================== */

    --white: #ffffff;

    /* Neutralskala umgedreht: nexus benutzt "50" als hellste Fläche und
       "900" als dunkelste Schriftfarbe. Im Dunkelmodus tauschen die Rollen. */
    --neutral-50:  #0c0c0e;
    --neutral-100: #000000;
    --neutral-200: #1f1f23;
    --neutral-300: #27272a;
    --neutral-400: #3f3f46;
    --neutral-500: #71717a;
    --neutral-600: #a1a1aa;
    --neutral-700: #d4d4d8;
    --neutral-800: #e4e4e7;
    --neutral-900: #fafafa;
    --neutral-950: #ffffff;

    --primary-50:  var(--mj-brand-a10);
    --primary-100: var(--mj-brand-a15);
    --primary-200: var(--mj-brand-a20);
    --primary-300: var(--mj-brand-a25);
    --primary-400: var(--mj-brand-a40);
    --primary-500: var(--mj-brand);
    --primary-600: var(--mj-brand);
    --primary-700: var(--mj-brand-light);
    --primary-800: var(--mj-brand-light);
    --primary-900: var(--mj-brand-dark);
    --primary-950: var(--mj-brand-dark);

    --primary:           var(--mj-brand);
    --primary-lifted:    var(--mj-brand-light);
    --primary-accented:  var(--mj-brand-dark);

    --secondary:           var(--mj-muted);
    --secondary-lifted:    var(--mj-text-2);
    --secondary-accented:  var(--mj-text);

    --success:           var(--mj-ok);
    --success-lifted:    #16a34a;
    --success-accented:  #15803d;

    --info:           var(--mj-brand);
    --info-lifted:    var(--mj-brand-light);
    --info-accented:  var(--mj-brand-dark);

    --notice:           #8b5cf6;
    --notice-lifted:    #a78bfa;
    --notice-accented:  #7c3aed;

    --warning:           var(--mj-warn);
    --warning-lifted:    #fbbf24;
    --warning-accented:  #d97706;

    --error:           var(--mj-err);
    --error-lifted:    #f87171;
    --error-accented:  #dc2626;

    --grayscale:           var(--mj-line);
    --grayscale-lifted:    var(--mj-surface-3);
    --grayscale-accented:  var(--mj-surface-2);

    --neutral:           var(--mj-muted);
    --neutral-lifted:    var(--mj-muted-2);
    --neutral-accented:  var(--mj-line-strong);

    --text-inverted:  var(--mj-on-brand);
    --text-muted:     var(--mj-muted-2);
    --text-lifted:    var(--mj-muted);
    --text-accented:  var(--mj-text-2);
    --text:           var(--mj-text);

    --border-muted:     var(--mj-line-soft);
    --border:           var(--mj-line);
    --border-lifted:    var(--mj-line-strong);
    --border-accented:  #52525b;

    --bg:           var(--mj-surface);
    --bg-muted:     var(--mj-surface-2);
    --bg-lifted:    var(--mj-black);
    --bg-accented:  var(--mj-surface-2);
    --bg-inverted:  var(--mj-black);

    --yellow-200:   #fde047;
    --yellow-300:   #facc15;
    --teal-300:     #5eead4;
    --teal-400:     #2dd4bf;
    --emerald-300:  #6ee7b7;
    --pink-400:     #f472b6;

    --text-xs: .6875rem;
    --text-sm: .78125rem;
    --text-md: .875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    --rounding-sm: var(--mj-r-sm);
    --rounding-md: var(--mj-r-md);
    --rounding-lg: var(--mj-r-lg);

    --letter-spacing: 0em;
    --disabled-opacity: 35%;
}

/* ============================================================================
   Basis
   ========================================================================== */

html,
body {
    background-color: var(--mj-black);
    color: var(--mj-text);
    font-family: var(--mj-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: 15px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--mj-text);
    font-family: var(--mj-font);
    font-weight: 800;
    letter-spacing: -.02em;
}

h1, .h1 { font-weight: 900; }

p { color: var(--mj-text-2); }

small,
.small,
.text-muted {
    color: var(--mj-muted-2);
}

hr { border-top-color: var(--mj-line-soft); }

a {
    color: var(--mj-brand);
    transition: color .2s ease;
}

a:hover,
a:focus {
    color: var(--mj-brand-light);
    text-decoration: none;
}

code, pre, kbd, samp {
    font-family: var(--mj-font);
    background-color: var(--mj-surface-3);
    color: var(--mj-brand-light);
    border-radius: var(--mj-r-sm);
}

pre {
    padding: 1rem;
    border: 1px solid var(--mj-line-soft);
}

/* Fokus bleibt sichtbar - Tastaturbedienung nicht kaputtmachen. */
:focus-visible {
    outline: 2px solid var(--mj-brand);
    outline-offset: 2px;
}

::selection {
    background-color: var(--mj-brand-a40);
    color: #bfdbfe;
}

/* Scrollbar wie auf der Hauptseite */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--mj-brand) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--mj-brand);
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover { background: var(--mj-brand-light); }

@keyframes mj-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

@keyframes mj-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Wiederverwendbarer Glow-Blob als Hintergrunddeko. */
.mj-glow-blob {
    position: absolute;
    border-radius: var(--mj-r-pill);
    filter: blur(120px);
    background: var(--mj-brand-a10);
    pointer-events: none;
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        /* Nutzerwunsch schlägt Design - deshalb hier bewusst !important */
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ---- Quelle: 20-components.css ---------------------------------------- */
/* ============================================================================
   20 - Bedienelemente: Knöpfe, Formulare, Karten, Meldungen, Dialoge
   ----------------------------------------------------------------------------
   Bootstrap 4.5.3. Das Eltern-Theme nexus definiert in sass/_buttons.scss und
   _forms.scss viele helle Festwerte (#fff, #ccc, #333) - die werden hier ersetzt.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Knöpfe
   ------------------------------------------------------------------------ */

.btn {
    border-radius: var(--mj-r-pill);
    font-weight: 600;
    letter-spacing: -.01em;
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, transform .12s ease, box-shadow .2s ease;
}

/* Ein <button class="btn"> ohne Variante behält sonst den hellgrauen
   Standardfond des Browsers (buttonface). Betrifft im echten WHMCS unter
   anderem den Benachrichtigungsknopf in der oberen Leiste. */
button.btn {
    background-color: transparent;
    border-color: transparent;
}

.btn:active {
    transform: scale(.97);
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px var(--mj-brand-a25);
}

/* ---- primär: die Signatur der Marke ------------------------------------ */

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    padding: .55rem 1.5rem;
    background: var(--mj-brand);
    border: 1px solid var(--mj-brand);
    color: var(--mj-on-brand);
    font-weight: 700;
    box-shadow: var(--mj-glow);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--mj-brand-light);
    border-color: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background: var(--mj-line);
    border-color: var(--mj-line);
    color: var(--mj-muted-2);
    box-shadow: none;
}

/* ---- sekundär ---------------------------------------------------------- */

.btn-default,
.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--mj-line);
    color: var(--mj-text-2);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-default:focus,
.btn-secondary:focus {
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

.btn-default:active,
.btn-default.active,
.btn-secondary:active {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

/* Elternteil erzwingt für den deaktivierten Zustand weiß mit !important. */
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus {
    background-color: transparent !important;
    border-color: var(--mj-line-soft) !important;
    color: var(--mj-muted-2) !important;
}

.btn-outline-primary {
    background-color: transparent;
    border: 1px solid var(--mj-brand-a60);
    color: var(--mj-brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

/* ---- Statusknöpfe ------------------------------------------------------ */

.btn-success {
    background-color: var(--mj-ok);
    border-color: var(--mj-ok);
    color: var(--mj-on-brand);
    font-weight: 700;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #16a34a;
    border-color: #16a34a;
    color: var(--mj-on-brand);
}

/* #ef4444 trägt weißen Text nur mit 3,8:1. #dc2626 kommt auf 4,8:1 und
   erfüllt damit die Schwelle - deshalb hier bewusst dunkler als --mj-err. */
.btn-danger {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.btn-warning {
    background-color: var(--mj-warn);
    border-color: var(--mj-warn);
    color: var(--mj-on-brand);
    font-weight: 700;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #d97706;
    border-color: #d97706;
    color: var(--mj-on-brand);
}

.btn-info {
    background-color: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--mj-brand-light);
    border-color: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

.btn-light,
.btn-outline-light {
    background-color: transparent;
    border: 1px solid var(--mj-line);
    color: var(--mj-text-2);
}

.btn-light:hover,
.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

.btn-link {
    color: var(--mj-brand);
    box-shadow: none;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--mj-brand-light);
    text-decoration: underline;
}

/* ---- Größen ----------------------------------------------------------- */

.btn-lg,
.btn-group-lg > .btn {
    padding: .8rem 2rem;
    font-size: 16px;
    border-radius: var(--mj-r-pill);
}

.btn-sm,
.btn-group-sm > .btn {
    padding: .35rem 1rem;
    font-size: 13px;
    border-radius: var(--mj-r-pill);
}

.btn-xs,
.btn-group-xs > .btn {
    padding: .18rem .6rem;
    font-size: 12px;
    line-height: 1.5;
    border-radius: var(--mj-r-pill);
}

/* Gruppierte Knöpfe brauchen wieder eckige Innenkanten. */
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-block {
    display: block;
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Formulare
   ------------------------------------------------------------------------ */

label,
.form-control-label {
    color: var(--mj-text-2);
    font-size: 14px;
    font-weight: 600;
}

.form-control,
.custom-select,
textarea,
textarea.form-control,
select.form-control {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    color: var(--mj-text);
    font-family: var(--mj-font);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-brand);
    color: var(--mj-text);
    box-shadow: 0 0 0 3px var(--mj-brand-a20);
    outline: 0;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--mj-muted-2);
    opacity: 1;
}

.form-control[readonly],
.form-control[disabled],
.form-control:disabled {
    background-color: var(--mj-surface-2);
    color: var(--mj-muted);
    opacity: 1;
}

/* Ohne diesen Block färbt Chrome ausgefüllte Felder weiß ein. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--mj-text);
    -webkit-box-shadow: 0 0 0 1000px var(--mj-surface-3) inset;
    box-shadow: 0 0 0 1000px var(--mj-surface-3) inset;
    caret-color: var(--mj-text);
    transition: background-color 100000s ease-in-out 0s;
}

/* Auswahlliste: Pfeil hell nachzeichnen, sonst verschwindet er im Dunkeln. */
.custom-select,
select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3e%3cpath fill='%23a1a1aa' d='M0 0l4 5 4-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 8px 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2rem;
}

select.form-control option {
    background-color: var(--mj-surface-2);
    color: var(--mj-text);
}

.form-group {
    margin-bottom: 1.15rem;
}

/* ---- zusammengesetzte Felder -------------------------------------------- */

.input-group-text {
    background-color: var(--mj-surface-2);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md) 0 0 var(--mj-r-md);
    color: var(--mj-muted);
}

.input-group > .input-group-append > .input-group-text {
    border-radius: 0 var(--mj-r-md) var(--mj-r-md) 0;
}

.input-group-merge .form-control {
    border-left: 0;
}

.input-group .btn-reveal-pw {
    border: 1px solid var(--mj-line);
    border-left: 0;
    border-radius: 0 var(--mj-r-md) var(--mj-r-md) 0;
    background-color: var(--mj-surface-3);
    color: var(--mj-muted);
}

.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-line-strong);
    color: var(--mj-brand);
}

.pw-input {
    height: initial;
}

.custom-file-label {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md) 0 0 var(--mj-r-md);
    color: var(--mj-muted);
}

.custom-file-label::after {
    background-color: var(--mj-surface-2);
    border-left: 1px solid var(--mj-line);
    color: var(--mj-text-2);
}

.custom-control-label {
    color: var(--mj-text-2);
    font-weight: 500;
}

.custom-control-label::before {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-line);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--mj-brand);
    border-color: var(--mj-brand);
}

/* ---- Fehlerzustände ---------------------------------------------------- */

.form-group .field-error-msg {
    color: var(--mj-err);
    font-size: 13px;
}

.has-error .form-control,
.form-control.is-invalid {
    border-color: var(--mj-err);
}

.has-error .form-control:focus,
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .22);
}

.form-control.is-warning {
    border-color: var(--mj-warn);
}

.form-control.is-warning:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .22);
}

.invalid-feedback,
.warning-feedback {
    color: var(--mj-err);
    font-size: 13px;
}

/* ---- Auswahlkästchen (iCheck) ------------------------------------------ */

/* Die Sprite-Grafik ist hell. Statt sie zu ersetzen, wird sie invertiert -
   so bleibt das Elternteil-Asset nutzbar und der Haken sichtbar. */
.icheckbox_square-blue,
.iradio_square-blue {
    filter: invert(1) hue-rotate(180deg) brightness(1.15);
}

body .icheckbox_square-blue.checked,
body .iradio_square-blue.checked,
body .icheckbox_square-blue.hover,
body .iradio_square-blue.hover {
    filter: invert(1) hue-rotate(180deg) brightness(1.35);
}

/* ---- Umschalter --------------------------------------------------------- */

.bootstrap-switch {
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    overflow: hidden;
}

.bootstrap-switch .bootstrap-switch-handle-off {
    background-color: var(--mj-surface-3);
    color: var(--mj-muted);
}

.bootstrap-switch .bootstrap-switch-handle-on {
    background-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

.bootstrap-switch .bootstrap-switch-label {
    background-color: var(--mj-line);
}

/* ---------------------------------------------------------------------------
   Karten
   ------------------------------------------------------------------------ */

.card {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
}

.card-header {
    padding: 14px 20px;
    background-color: transparent;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text);
    font-weight: 700;
}

.card-header:first-child {
    border-radius: var(--mj-r-lg) var(--mj-r-lg) 0 0;
}

.card-body {
    padding: 20px;
    color: var(--mj-text-2);
}

.card-footer {
    padding: 14px 20px;
    background-color: transparent;
    border-top: 1px solid var(--mj-line-soft);
    color: var(--mj-muted);
}

.card-footer:last-child {
    border-radius: 0 0 var(--mj-r-lg) var(--mj-r-lg);
}

.card-title {
    margin: 0 0 16px;
    color: var(--mj-text);
    font-size: 20px;
    font-weight: 800;
}

.card-header .card-title {
    margin: 0;
    font-size: 16px;
}

/* Das Elternteil erzwingt in _layout.scss overflow:visible und 32px Innenabstand. */
.primary-content .card {
    margin-bottom: 16px;
    border-radius: var(--mj-r-lg);
}

.primary-content .card.mw-540 {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.primary-content .card.mw-750 {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Meldungen
   ------------------------------------------------------------------------ */

.alert {
    padding: 14px 18px;
    border-radius: var(--mj-r-md);
    border-width: 1px;
    border-style: solid;
    font-size: 14px;
}

.alert-info {
    background-color: var(--mj-brand-a10);
    border-color: var(--mj-brand-a40);
    color: #bfdbfe;
}

.alert-success {
    background-color: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .38);
    color: #86efac;
}

.alert-warning {
    background-color: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .38);
    color: #fcd34d;
}

.alert-danger {
    background-color: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .38);
    color: #fca5a5;
}

.alert-secondary,
.alert-light,
.alert-dark {
    background-color: var(--mj-surface-2);
    border-color: var(--mj-line);
    color: var(--mj-text-2);
}

.alert-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.alert-link:hover {
    color: inherit;
    opacity: .85;
}

.alert h2,
.alert h3,
.alert h4 {
    color: inherit;
    font-size: 17px;
}

.alert ul {
    margin-bottom: 0;
    padding-left: 20px;
}

/* Elternteil färbt .alert:has(form) und :has(small) auf weiß. */
.alert:has(form),
.alert:has(small) {
    background-color: var(--mj-surface-2);
    border-color: var(--mj-line);
    color: var(--mj-text-2);
}

/* ---------------------------------------------------------------------------
   Abzeichen
   ------------------------------------------------------------------------ */

.badge {
    padding: .35em .7em;
    border-radius: var(--mj-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
}

.badge-primary,
.badge-info {
    background-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

.badge-success { background-color: var(--mj-ok);   color: var(--mj-on-brand); }
.badge-warning { background-color: var(--mj-warn); color: var(--mj-on-brand); }
.badge-danger  { background-color: var(--mj-err);  color: #fff; }

.badge-dark,
.badge-secondary,
.badge-light {
    background-color: var(--mj-line);
    color: var(--mj-text-2);
}

.label {
    display: inline-block;
    padding: .25em .7em .3em;
    border-radius: var(--mj-r-pill);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Dialoge
   ------------------------------------------------------------------------ */

.modal-backdrop.show {
    background-color: #000;
    opacity: .78;
}

.modal .modal-dialog {
    max-width: 700px;
}

.modal-content {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-lg);
    box-shadow: var(--mj-shadow);
}

/* Das Elternteil setzt den Kopf per !important auf --bg. */
.modal-content .modal-header,
.modal .modal-header {
    padding: 16px 20px;
    background-color: var(--mj-surface-2) !important;
    border-bottom: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg) var(--mj-r-lg) 0 0;
    color: var(--mj-text) !important;
}

.modal-title {
    color: var(--mj-text);
    font-size: 17px;
    font-weight: 800;
}

.modal-body {
    padding: 20px;
    color: var(--mj-text-2);
}

.modal-footer {
    padding: 14px 20px;
    background-color: transparent;
    border-top: 1px solid var(--mj-line-soft);
}

.modal-footer .loader {
    color: var(--mj-muted-2);
    font-size: 13px;
}

.close {
    color: var(--mj-muted);
    opacity: 1;
    text-shadow: none;
}

.close:hover,
.close:focus {
    color: var(--mj-text);
    opacity: 1;
}

/* ---- Sprach- und Währungsdialog ---------------------------------------- */

.modal-localisation .modal-content {
    background-color: var(--mj-surface);
}

.modal-localisation .modal-body {
    background-color: var(--mj-surface);
    background-image: none;  /* Elternteil legt hier img/worldmap.png darunter */
}

.modal-localisation .h5 {
    color: var(--mj-text);
}

.modal-localisation .modal-footer {
    border: 0;
}

.modal-localisation .item-selector .item {
    display: block;
    margin: 3px 0;
    padding: 7px 4px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-sm);
    color: var(--mj-text-2);
    font-size: 14px;
    text-align: center;
}

.modal-localisation .item-selector .item:hover {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

.modal-localisation .item-selector .item.active {
    background-color: var(--mj-brand-a20);
    border-color: var(--mj-brand);
    color: var(--mj-brand);
}

/* ---------------------------------------------------------------------------
   Aufklappmenüs außerhalb der Navigation
   ------------------------------------------------------------------------ */

.dropdown-menu {
    padding: 6px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    box-shadow: var(--mj-shadow);
}

.dropdown-item {
    border-radius: var(--mj-r-sm);
    color: var(--mj-text-2);
    font-size: 14px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--mj-brand-a20);
    color: var(--mj-brand);
}

.dropdown-divider {
    border-top-color: var(--mj-line-soft);
}

/* ---------------------------------------------------------------------------
   Blätterung
   ------------------------------------------------------------------------ */

.pagination {
    font-size: 14px;
}

.page-link {
    margin: 0 2px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-sm) !important;  /* Elternteil rundet nur außen */
    color: var(--mj-text-2);
}

.page-link:hover {
    background-color: var(--mj-surface-3);
    border-color: var(--mj-line);
    color: var(--mj-text);
}

.page-item.active .page-link {
    background-color: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

.page-item.disabled .page-link {
    background-color: var(--mj-surface);
    border-color: var(--mj-line-soft);
    color: var(--mj-muted-2);
}

/* ---------------------------------------------------------------------------
   Reiter
   ------------------------------------------------------------------------ */

.nav-tabs {
    border-bottom: 1px solid var(--mj-line);
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-radius: var(--mj-r-sm) var(--mj-r-sm) 0 0;
    color: var(--mj-muted);
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: transparent transparent var(--mj-line-strong);
    color: var(--mj-text);
}

.nav-tabs .nav-link.active {
    background-color: var(--mj-surface);
    border-color: var(--mj-line) var(--mj-line) var(--mj-surface);
    color: var(--mj-brand);
}

.nav-pills .nav-link.active {
    background-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

/* ---------------------------------------------------------------------------
   Fortschritt
   ------------------------------------------------------------------------ */

.progress {
    height: 8px;
    background-color: var(--mj-surface-3);
    border-radius: var(--mj-r-pill);
}

.progress-bar {
    background-color: var(--mj-brand);
}

.password-strength-meter .progress {
    margin-bottom: 6px;
}

.password-strength-meter p {
    margin-bottom: 14px;
    color: var(--mj-muted);
    font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Listengruppen (Grundgestalt)
   ------------------------------------------------------------------------ */

.list-group {
    border-radius: var(--mj-r-md);
}

.list-group-item {
    background-color: transparent;
    border-color: var(--mj-line-soft);
    color: var(--mj-text-2);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
}

.list-group-item.active {
    background-color: var(--mj-brand-a15);
    border-color: var(--mj-line-soft);
    color: var(--mj-brand);
}

.list-group-item.disabled {
    background-color: transparent;
    color: var(--mj-muted-2);
}

/* ---------------------------------------------------------------------------
   Kurzhinweise
   ------------------------------------------------------------------------ */

.tooltip-inner {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-sm);
    color: var(--mj-text);
    font-size: 12px;
}

.tooltip .arrow::before {
    border-top-color: var(--mj-line);
    border-bottom-color: var(--mj-line);
}

.popover {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    box-shadow: var(--mj-shadow);
}

.popover-header {
    background-color: var(--mj-surface-2);
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text);
}

.popover-body {
    color: var(--mj-text-2);
}

.popover .arrow::after {
    border-top-color: var(--mj-surface);
    border-bottom-color: var(--mj-surface);
}


/* ---------------------------------------------------------------------------
   Nachgemessen auf cp.mam-jahn.de
   ------------------------------------------------------------------------ */

/* Bootstrap-Utilities mit !important – nur mit !important zu schlagen */
.text-muted { color: var(--mj-muted) !important; }
.bg-light   { background-color: var(--mj-surface) !important; }
.bg-white   { background-color: var(--mj-surface) !important; }

/* Bootstrap-3-Labels (Status in Dashboard-Listen): weiß auf kräftigem Grün
   kam nur auf 2,3:1. Getönte Pillen wie bei .status-* */
.label-default,
.label-secondary {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    color: var(--mj-text-2);
}

.label-success {
    background-color: rgba(34, 197, 94, .15);
    border: 1px solid rgba(34, 197, 94, .4);
    color: #86efac;
}

.label-info,
.label-primary {
    background-color: var(--mj-brand-a15);
    border: 1px solid var(--mj-brand-a40);
    color: var(--mj-brand-light);
}

.label-warning {
    background-color: rgba(245, 158, 11, .15);
    border: 1px solid rgba(245, 158, 11, .4);
    color: #fcd34d;
}

.label-danger {
    background-color: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #fca5a5;
}

/* Umschalter-Plugin: eigene Farbklassen schlagen die Grundregel */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
    background: var(--mj-brand);
    color: var(--mj-on-brand);
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
    background: var(--mj-surface-3);
    color: var(--mj-text-2);
}

.bootstrap-switch .bootstrap-switch-label {
    background: var(--mj-line-strong);
}


/* ---- Quelle: 40-orderform.css ---------------------------------------- */
/* ============================================================================
   40 - Bestellformular (standard_cart / mamjahn_cart)
   ----------------------------------------------------------------------------
   Das Original in orderforms/standard_cart/css/style.css arbeitet mit hellen
   Festwerten: #058 als Blau, #f8f8f8 und #eee als Flächen, #666 für die
   Bestellübersicht. Alle sichtbaren Stellen werden hier dunkel nachgezogen.
   Layout (float, 25/75 Prozent) bleibt unangetastet.
   ========================================================================== */

body #order-standard_cart {
    color: var(--mj-text-2);
    font-family: var(--mj-font);
}

/* ---------------------------------------------------------------------------
   Seitenleiste der Kategorien
   ------------------------------------------------------------------------ */

body #order-standard_cart .cart-sidebar .card,
body #order-standard_cart .cart-sidebar .panel,
body #order-standard_cart .cart-sidebar .card-sidebar {
    margin-bottom: 14px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    overflow: hidden;
}

body #order-standard_cart .cart-sidebar .card-header,
body #order-standard_cart .cart-sidebar .panel-heading {
    padding: 13px 18px;
    background-color: transparent;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text);
    font-weight: 700;
}

body #order-standard_cart .cart-sidebar h3,
body #order-standard_cart .sidebar-collapsed h3,
body #order-standard_cart .cart-sidebar .panel-title,
body #order-standard_cart .cart-sidebar .card-title {
    margin: 0;
    color: var(--mj-text);
    font-size: 14px;
    font-weight: 700;
}

body #order-standard_cart .cart-sidebar .card-footer,
body #order-standard_cart .cart-sidebar .panel-footer {
    background-color: transparent;
    border-top: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .cart-sidebar .list-group-item {
    position: relative;
    margin: 0;
    padding: 10px 18px;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
    font-size: 14px;
    font-weight: 500;
}

body #order-standard_cart .cart-sidebar .list-group-item:first-child {
    border-radius: 0;
}

body #order-standard_cart .cart-sidebar .list-group-item:last-child {
    border-bottom: 0;
}

body #order-standard_cart .cart-sidebar .list-group-item:hover {
    background-color: var(--mj-surface-3);
    color: var(--mj-text);
}

body #order-standard_cart .cart-sidebar .list-group-item.active,
body #order-standard_cart .cart-sidebar .list-group-item.active:hover {
    background-color: var(--mj-brand-a15);
    color: var(--mj-brand);
    font-weight: 600;
}

body #order-standard_cart .cart-sidebar .list-group-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--mj-brand);
}

body #order-standard_cart .cart-sidebar .list-group-item .badge {
    background-color: var(--mj-surface-3);
    color: var(--mj-muted);
}

body #order-standard_cart .cart-sidebar .card-minimise,
body #order-standard_cart .cart-sidebar .panel-minimise {
    color: var(--mj-muted-2);
    cursor: pointer;
}

body #order-standard_cart .sidebar-collapsed {
    margin-top: 20px;
    padding: 12px 16px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

/* ---------------------------------------------------------------------------
   Kopfzeilen und Trenner
   ------------------------------------------------------------------------ */

body #order-standard_cart .cart-body .header-lined {
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .cart-body .header-lined h1 {
    margin-bottom: 6px;
    color: var(--mj-text);
    font-weight: 900;
    letter-spacing: -.025em;
}

body #order-standard_cart .cart-body .header-lined p {
    margin: 0;
    color: var(--mj-muted);
}

body #order-standard_cart .font-size-36 { font-size: clamp(1.75rem, 3.4vw, 2.3rem); }
body #order-standard_cart .font-size-30 { font-size: 1.6rem; }
body #order-standard_cart .font-size-24 { font-size: 1.35rem; }
body #order-standard_cart .font-size-22 { font-size: 1.2rem; }

/* Abschnittstrenner: im Original eine Linie mit zentriertem blauen Text
   auf weißem Fond. */
body #order-standard_cart .sub-heading,
body #order-standard_cart .sub-heading-borderless {
    height: 0;
    margin-top: 34px;
    margin-bottom: 34px;
    border-top: 1px solid var(--mj-line);
    text-align: center;
}

body #order-standard_cart .sub-heading-borderless {
    border-top: 0;
}

body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span {
    display: inline-block;
    position: relative;
    top: -13px;
    padding: 0 18px;
    background: var(--mj-black);
    color: var(--mj-text);
    font-size: 15px;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Produktkarten
   ------------------------------------------------------------------------ */

body #order-standard_cart .products {
    margin: 14px 0;
}

body #order-standard_cart .products .product,
body #order-standard_cart .products .mj-product {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    padding: 0;
    margin: 0 0 22px;
    background: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-xl);
    transition: transform .3s ease, border-color .3s ease;
}

/* Akzent-Glow oben rechts, erscheint beim Ueberfahren. */
body #order-standard_cart .products .product::after {
    content: "";
    position: absolute;
    top: -110px;
    right: -110px;
    width: 240px;
    height: 240px;
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand-a20);
    filter: blur(90px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

body #order-standard_cart .products .product:hover {
    transform: translateY(-4px);
    border-color: var(--mj-brand-a60);
}

body #order-standard_cart .products .product:hover::after {
    opacity: 1;
}

body #order-standard_cart .products .product header {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 18px 22px 14px;
    background: transparent;      /* Original: #f8f8f8 */
    border-bottom: 1px solid var(--mj-line-soft);
    border-radius: 0;
}

body #order-standard_cart .products .product header span {
    margin: 0;
    color: var(--mj-text);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

body #order-standard_cart .products .product header .qty {
    float: right;
    color: var(--mj-muted-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

body #order-standard_cart .products .product div.product-desc {
    position: relative;
    z-index: 1;
    float: none;
    flex: 1 1 auto;
    width: auto;
    padding: 16px 22px 6px;
    font-size: 14px;
    color: var(--mj-muted);
}

body #order-standard_cart .products .product div.product-desc p {
    margin-bottom: 12px;
    color: var(--mj-muted);
}

body #order-standard_cart .products .product div.product-desc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body #order-standard_cart .products .product div.product-desc li {
    position: relative;
    padding: 5px 0 5px 24px;
    color: var(--mj-text-2);
    font-size: 14px;
    font-weight: 500;
}

/* Haken statt Aufzählungspunkt.
   WHMCS 9.0 liefert Font Awesome Pro 6.7 aus (die Angabe "5.10.1" in
   theme.yaml stammt noch vom Elternteil). Der Stapel deckt Pro und Free
   in Version 6 und 5 ab, damit das Zeichen auch nach einem Wechsel steht.
   font-weight 900 wählt innerhalb der Familie den soliden Schnitt. */
body #order-standard_cart .products .product div.product-desc li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--mj-brand);
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free",
                 "Font Awesome 5 Pro", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 12px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

body #order-standard_cart .products .product span.feature-value {
    color: var(--mj-text);
    font-weight: 700;
}

body #order-standard_cart .products .product select {
    width: 100%;
    text-overflow: ellipsis;
}

body #order-standard_cart .products .product footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    float: none;
    width: auto;
    margin: 0;
    margin-top: auto;
    padding: 16px 22px 20px;
    border-top: 1px solid var(--mj-line-soft);
    font-size: 14px;
    text-align: left;
}

body #order-standard_cart .products .product div.product-pricing {
    margin: 0;
    color: var(--mj-muted-2);
    font-size: 12px;
    line-height: 1.5;
}

body #order-standard_cart .products .product div.product-pricing span.price {
    display: block;
    color: var(--mj-text);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}

body #order-standard_cart .products .product div.product-pricing small {
    color: var(--mj-muted-2);
}

.mj-price-label {
    display: block;
    color: var(--mj-muted-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Bestellknopf als Pille in Markenfarbe. */
body #order-standard_cart .btn-order-now,
body #order-standard_cart .mj-btn-order {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: .6rem 1.4rem;
    background: var(--mj-brand);
    border: 0;
    border-radius: var(--mj-r-pill);
    color: var(--mj-on-brand);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--mj-glow);
    transition: background-color .2s ease, transform .15s ease;
}

body #order-standard_cart .btn-order-now:hover,
body #order-standard_cart .mj-btn-order:hover {
    background: var(--mj-brand-light);
    color: var(--mj-on-brand);
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Warenkorb
   ------------------------------------------------------------------------ */

body #order-standard_cart .view-cart-items-header {
    margin: 0;
    padding: 12px 16px;
    background-color: var(--mj-surface-2);   /* Original: #058 */
    border: 1px solid var(--mj-line-soft);
    border-bottom: 0;
    border-radius: var(--mj-r-lg) var(--mj-r-lg) 0 0;
    color: var(--mj-muted-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body #order-standard_cart .view-cart-items {
    margin: 0 0 22px;
    border-bottom: 0;                        /* Original: 2px solid #058 */
    border-radius: 0 0 var(--mj-r-lg) var(--mj-r-lg);
}

body #order-standard_cart .view-cart-items .item {
    margin: 0;
    padding: 16px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-top: 0;
    font-size: 14px;
}

body #order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: var(--mj-surface);     /* Original: #eee als Zebrastreifen */
}

body #order-standard_cart .view-cart-items .item:last-child {
    border-radius: 0 0 var(--mj-r-lg) var(--mj-r-lg);
}

body #order-standard_cart .view-cart-items .item-title {
    color: var(--mj-text);
    font-size: 1.05rem;
    font-weight: 700;
}

body #order-standard_cart .view-cart-items .item-group {
    color: var(--mj-muted-2);
    font-size: 13px;
}

body #order-standard_cart .view-cart-items .item-domain {
    color: var(--mj-brand);
    font-size: 13px;
}

body #order-standard_cart .view-cart-items .item-price {
    text-align: right;
}

body #order-standard_cart .view-cart-items .item-price span {
    color: var(--mj-text);
    font-size: 1.25rem;
    font-weight: 800;
}

body #order-standard_cart .view-cart-items .item-price .cycle {
    color: var(--mj-muted-2);
    font-size: 12px;
    font-weight: 500;
}

body #order-standard_cart .view-cart-items .item-qty {
    text-align: center;
}

body #order-standard_cart .view-cart-items .item-qty input {
    margin-bottom: 6px;
    padding: 5px;
    height: auto;
    text-align: center;
}

body #order-standard_cart .btn-remove-from-cart {
    color: var(--mj-muted-2);
}

body #order-standard_cart .btn-remove-from-cart:hover {
    color: var(--mj-err);
}

body #order-standard_cart .empty-cart {
    margin: -22px 8px 0 0;
    text-align: right;
}

body #order-standard_cart .empty-cart .btn {
    margin: 0;
    padding: 5px 14px;
    background-color: var(--mj-surface-2);   /* Original: #058 */
    border: 1px solid var(--mj-line-soft);
    border-top: 0;
    border-radius: 0 0 var(--mj-r-sm) var(--mj-r-sm);
    color: var(--mj-muted);
    font-size: 12px;
}

body #order-standard_cart .empty-cart .btn:hover {
    color: var(--mj-err);
}

body #order-standard_cart .view-cart-empty {
    padding: 44px 16px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-top: 0;
    border-radius: 0 0 var(--mj-r-lg) var(--mj-r-lg);
    color: var(--mj-muted);
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Bestellübersicht
   ------------------------------------------------------------------------ */

body #order-standard_cart .order-summary {
    margin: 0 0 22px;
    padding: 0;
    background-color: transparent;           /* Original: #666 */
    border-bottom: 0;
    border-radius: var(--mj-r-lg);
}

body #order-standard_cart .order-summary h2 {
    margin: 0;
    padding: 14px 18px;
    background-color: var(--mj-surface-2);
    border: 1px solid var(--mj-line-soft);
    border-bottom: 0;
    border-radius: var(--mj-r-lg) var(--mj-r-lg) 0 0;
    color: var(--mj-text);
    font-size: 1.05rem;
    font-weight: 800;
    text-align: left;
}

body #order-standard_cart .summary-container {
    margin: 0;
    padding: 18px;
    min-height: 100px;
    background-color: var(--mj-surface);     /* Original: #f8f8f8 */
    border: 1px solid var(--mj-line-soft);
    border-top: 0;
    border-radius: 0 0 var(--mj-r-lg) var(--mj-r-lg);
    font-size: 14px;
}

body #order-standard_cart .order-summary .product-name {
    display: block;
    color: var(--mj-text);
    font-size: 1.05rem;
    font-weight: 700;
}

body #order-standard_cart .order-summary .product-group {
    display: block;
    margin: 0 0 6px;
    color: var(--mj-muted-2);
    font-style: normal;
    font-size: 13px;
}

body #order-standard_cart .order-summary .subtotal {
    margin: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--mj-line-soft);
    font-size: 1.05rem;
}

body #order-standard_cart .order-summary .summary-totals,
body #order-standard_cart .order-summary .bordered-totals {
    margin: 8px 0;
    padding: 8px 0;
    border-top: 1px solid var(--mj-line-soft);
    border-bottom: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .order-summary .recurring-totals {
    margin: 8px 0 0;
    padding: 0;
}

body #order-standard_cart .order-summary .recurring-charges {
    color: var(--mj-muted-2);
    font-size: 13px;
    font-style: normal;
    text-align: right;
}

body #order-standard_cart .order-summary .total-due-today {
    color: var(--mj-muted);
}

body #order-standard_cart .order-summary .total-due-today span {
    display: block;
    text-align: right;
}

body #order-standard_cart .order-summary .total-due-today .amt {
    color: var(--mj-brand);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

body #order-standard_cart .order-summary .total-due-today-padded {
    margin: 20px 0;
}

body #order-standard_cart .order-summary .loader {
    color: var(--mj-muted-2);
}

body #order-standard_cart .order-summary i.fa-trash {
    color: var(--mj-muted-2);
}

body #order-standard_cart .order-summary i.fa-trash:hover {
    color: var(--mj-err);
}

body #order-standard_cart .order-summary .btn-continue-shopping,
body #order-standard_cart .btn-continue-shopping {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    color: var(--mj-muted);
    font-size: 14px;
}

body #order-standard_cart .btn-continue-shopping:hover {
    color: var(--mj-brand);
}

body #order-standard_cart .btn-checkout {
    width: 100%;
    padding: .9rem 2rem;
    background: var(--mj-brand);
    border: 0;
    border-radius: var(--mj-r-pill);
    color: var(--mj-on-brand);
    font-size: 16px;
    font-weight: 700;
    box-shadow: var(--mj-glow);
}

body #order-standard_cart .btn-checkout:hover {
    background: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

body #order-standard_cart .btn-checkout.disabled {
    background: var(--mj-line);
    color: var(--mj-muted-2);
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Gutschein und Steuerrechner
   ------------------------------------------------------------------------ */

body #order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 0;
}

body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    color: var(--mj-muted);
}

body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-bottom: 0;
    border-radius: var(--mj-r-md) var(--mj-r-md) 0 0;
    color: var(--mj-brand);
}

body #order-standard_cart .view-cart-tabs .tab-content {
    padding: 16px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: 0 var(--mj-r-md) var(--mj-r-md) var(--mj-r-md);
}

body #order-standard_cart .view-cart-tabs .promo .form-group {
    margin-bottom: 10px;
}

body #order-standard_cart .view-cart-promotion-code {
    color: var(--mj-ok);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Produktkonfiguration
   ------------------------------------------------------------------------ */

body #order-standard_cart .product-info {
    margin: 0 0 22px;
    padding: 14px 18px;
    background-color: var(--mj-surface);     /* Original: #f8f8f8 */
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    font-size: 14px;
}

body #order-standard_cart .product-info .product-title {
    margin: 0 0 6px;
    color: var(--mj-text);
    font-size: 1.5rem;
    font-weight: 800;
}

body #frmConfigureProduct .form-group {
    margin-bottom: 1.4rem;
}

body #frmConfigureProduct label {
    color: var(--mj-text-2);
    font-weight: 600;
}

body #frmConfigureProduct .form-control {
    color: var(--mj-text);
}

body #order-standard_cart .field-help-text {
    display: block;
    margin-top: 6px;
    margin-bottom: 10px;
    color: var(--mj-muted-2);
    font-size: 12px;
    font-weight: 400;
}

/* ---- Hostname-Auswahl -------------------------------------------------- */
/* Markup aus mamjahn_cart/configureproduct.tpl: links die Auswahl
   #mjHostMode, rechts die Gruppe .mj-host-custom mit dem WHMCS-Feld
   #inputHostname. Sichtbarkeit steuert js/mj-hostname.js über [hidden]. */

body #order-standard_cart .mj-host-block .field-help-text {
    display: block;
    margin-top: 7px;
    margin-bottom: 0;
    color: var(--mj-muted-2);
    font-size: 12px;
    line-height: 1.5;
}

body #order-standard_cart .mj-host-hint:empty {
    display: none;
}

body #order-standard_cart .mj-host-custom {
    animation: mj-fade-up .25s ease;
}

body #order-standard_cart select.mj-host-mode--custom {
    border-color: var(--mj-brand-a60);
}

body #order-standard_cart .mj-host-invalid,
body #order-standard_cart .mj-host-invalid:focus {
    border-color: var(--mj-err);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .2);
}

body #order-standard_cart .mj-host-note--ok    { color: var(--mj-ok); }
body #order-standard_cart .mj-host-note--error { color: #fca5a5; }

/* ---- Zusatzoptionen als anklickbare Karten ------------------------------ */

body #order-standard_cart .panel-addon {
    overflow: hidden;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    font-size: 14px;
    text-align: center;
    transition: border-color .2s ease, transform .2s ease;
}

body #order-standard_cart .panel-addon:hover {
    border-color: var(--mj-brand-a60);
    transform: translateY(-2px);
    cursor: pointer;
}

body #order-standard_cart .panel-addon .panel-body {
    padding: 16px;
    border-radius: 0;
    color: var(--mj-muted);
}

body #order-standard_cart .panel-addon .panel-body label {
    color: var(--mj-text);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

body #order-standard_cart .panel-addon .panel-price {
    padding: 8px;
    background-color: var(--mj-surface-2);   /* Original: #e8e8e8 */
    color: var(--mj-text-2);
    font-weight: 600;
}

body #order-standard_cart .panel-addon .panel-add {
    display: block;
    padding: 9px;
    background-color: var(--mj-surface-3);   /* Original: #5cb85c */
    border-radius: 0;
    color: var(--mj-muted);
    font-weight: 700;
}

body #order-standard_cart .panel-addon-selected {
    border-color: var(--mj-brand);
    background-color: var(--mj-brand-a10);
}

body #order-standard_cart .panel-addon-selected .panel-add {
    background-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

/* ---- Domainauswahl im Bestellweg ---------------------------------------- */

body #order-standard_cart .domain-selection-options {
    background: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    overflow: hidden;
}

body #order-standard_cart .domain-selection-options .option {
    margin: 0;
    padding: 16px 18px;
    background-color: transparent;
    border-bottom: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .domain-selection-options .option:last-child {
    border-bottom: 0;
}

body #order-standard_cart .domain-selection-options .option:hover {
    background-color: var(--mj-surface-3);
}

body #order-standard_cart .domain-selection-options .option-selected {
    background: var(--mj-brand-a10);
}

body #order-standard_cart .domain-selection-options .option-selected label {
    color: var(--mj-text);
    font-weight: 700;
}

body #order-standard_cart .domain-selection-options .domain-input-group input::placeholder {
    color: var(--mj-muted-2);
}

body #order-standard_cart .addon-promo-container {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

body #order-standard_cart .addon-promo-container h3 {
    color: var(--mj-text);
}

body #order-standard_cart .addon-promo-container .description {
    color: var(--mj-muted);
}

/* ---------------------------------------------------------------------------
   Kasse
   ------------------------------------------------------------------------ */

body #order-standard_cart .field,
body #order-standard_cart .form-control {
    background-color: var(--mj-surface-3);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-md);
    color: var(--mj-text);
}

body #order-standard_cart .form-control:focus,
body #order-standard_cart .field:focus {
    border-color: var(--mj-brand);
    box-shadow: 0 0 0 3px var(--mj-brand-a20);
    outline: 0;
}

body #order-standard_cart .field[disabled],
body #order-standard_cart .field[readonly],
body #order-standard_cart .form-control[disabled],
body #order-standard_cart .form-control[readonly] {
    background-color: var(--mj-surface-2);
    color: var(--mj-muted);
    opacity: 1;
}

body #order-standard_cart .field::placeholder,
body #order-standard_cart .form-control::placeholder {
    color: var(--mj-muted-2);
}

body #order-standard_cart .field-icon i,
body #order-standard_cart .prepend-icon .field-icon i {
    color: var(--mj-muted-2);
}

body #order-standard_cart textarea.field {
    min-height: 90px;
}

/* Auswahl bestehender Konten */
body #order-standard_cart .account-select-container {
    margin: 0;
    border-right: 0;
}

body #order-standard_cart .account-select-container div.account {
    padding: 14px;
    background: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-right: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
}

body #order-standard_cart .account-select-container div.account:not(.border-bottom) {
    border-bottom: 0;
}

body #order-standard_cart .account-select-container div.account.active {
    background: var(--mj-brand-a10);
    border-color: var(--mj-brand-a40);
    color: var(--mj-text);
}

/* Zahlungsarten */
body #order-standard_cart .cc-input-container {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    color: var(--mj-text-2);
}

body #order-standard_cart .cc-input-container .paymethod-info {
    color: var(--mj-muted);
}

body #order-standard_cart .cc-input-container ul li {
    color: var(--mj-text-2);
}

body #frmCheckout #creditCardInputFields {
    padding: 16px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

body #frmCheckout #creditCardInputFields input::placeholder {
    color: var(--mj-muted-2);
}

body #order-standard_cart .checkout-security-msg {
    margin: 22px 0;
    padding-left: 72px;
    background-color: transparent;
    border: 0;
    color: var(--mj-muted-2);
    font-size: 13px;
}

body #order-standard_cart .checkout-security-msg i {
    float: left;
    margin-left: -48px;
    color: var(--mj-ok);
    font-size: 2.6em;
}

body #order-standard_cart .checkout-error-feedback {
    margin-bottom: 18px;
}

body #order-standard_cart .express-checkout-buttons .separator {
    color: var(--mj-muted-2);
}

body #order-standard_cart .apply-credit-container {
    padding: 14px;
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

body #order-standard_cart .panel-taxes {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

/* ---------------------------------------------------------------------------
   Bestätigungsseite
   ------------------------------------------------------------------------ */

body #order-standard_cart .order-confirmation {
    padding: 22px;
    text-align: center;
}

body #order-standard_cart .order-confirmation span {
    display: inline-block;
    margin-top: 6px;
    color: var(--mj-brand);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

body #order-standard_cart .order-confirmation-addon-output {
    margin: 16px 0;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Domainsuche und Preistabellen
   ------------------------------------------------------------------------ */

.domain-checker-container,
.domain-checker-bg {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
}

.domain-checker-available {
    color: var(--mj-ok);
}

.domain-checker-invalid,
.transfer-not-eligible {
    color: var(--mj-err);
}

.transfer-eligible {
    color: var(--mj-ok);
}

.domain-checker-result-headline {
    color: var(--mj-text);
    font-weight: 700;
}

.domain-bulk-domain-well,
.domain-bulk-options-box,
.domain-disclaimer-area,
.domain-step-options {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    color: var(--mj-text-2);
}

.domain-promo-box {
    background: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-lg);
    color: var(--mj-text-2);
}

.domain-promo-box h3 {
    color: var(--mj-text);
}

.domain-promo-box .text-primary {
    color: var(--mj-brand) !important;  /* Bootstrap-Utility setzt !important */
}

.spotlight-tld,
.spotlight-tld-container {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    color: var(--mj-text-2);
}

.spotlight-tld .invalid {
    color: var(--mj-err);
}

.suggested-domains .card-header {
    background-color: var(--mj-surface-2);
    color: var(--mj-text);
}

.suggested-domains .list-group-item {
    background-color: var(--mj-surface);
    border-color: var(--mj-line-soft);
    color: var(--mj-text-2);
}

.suggested-domains .price {
    color: var(--mj-text);
    font-weight: 700;
}

.suggested-domains .extension {
    color: var(--mj-brand);
}

.domain-pricing .tld-row,
.domain-pricing .tld-pricing-header > div {
    background-color: var(--mj-surface);
    border-color: var(--mj-line-soft);
    color: var(--mj-text-2);
}

.domain-pricing .tld-row.highlighted {
    background-color: var(--mj-surface-3);
}

.domain-pricing .tld-row.no-tlds {
    color: var(--mj-muted-2);
}

.domain-pricing .featured-tld {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
}

.domain-tld-pricing-table-responsive,
a.domain-tld-pricing-category {
    color: var(--mj-text-2);
}

/* ---------------------------------------------------------------------------
   Verlängerungen
   ------------------------------------------------------------------------ */

.service-renewals .service-renewal,
.addon-renewals .service-renewal {
    background-color: var(--mj-surface);
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
}

.service-renewals .service-renewal:nth-child(even),
.addon-renewals .service-renewal:nth-child(even) {
    background-color: var(--mj-surface);
}

.service-renewals .service-renewal h3 {
    color: var(--mj-text);
}

.service-renewals .div-renewal-period-label {
    color: var(--mj-muted-2);
}

.service-renewals .div-renewal-ineligible {
    color: var(--mj-muted-2);
}

/* ---------------------------------------------------------------------------
   Werbeflächen von MarketConnect
   ------------------------------------------------------------------------ */

body #order-standard_cart .mc-promo {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-md);
    color: var(--mj-text-2);
}

body #order-standard_cart .mc-promo .header {
    background-color: var(--mj-surface-2);
    border-bottom: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .mc-promo .body {
    background-color: var(--mj-surface);
    border-top: 0;
    border-radius: 0 0 var(--mj-r-md) var(--mj-r-md);
}

body #order-standard_cart .mc-promo .headline {
    color: var(--mj-text);
}

body #order-standard_cart .mc-promo .tagline,
body #order-standard_cart .mc-promo .text {
    color: var(--mj-muted);
}

body #order-standard_cart .mc-promo .price {
    color: var(--mj-text);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Responsiv: unter 768px stehen Seitenleiste und Inhalt untereinander
   ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    body #order-standard_cart .cart-sidebar,
    body #order-standard_cart .cart-body,
    body #order-standard_cart .secondary-cart-body,
    body #order-standard_cart .secondary-cart-sidebar {
        float: none;
        width: 100%;
    }

    body #order-standard_cart .products .product footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    body #order-standard_cart .btn-order-now,
    body #order-standard_cart .mj-btn-order {
        justify-content: center;
    }
}


/* ---------------------------------------------------------------------------
   Nachgemessen auf cp.mam-jahn.de: nexus stellt seinen Warenkorb-Regeln
   "body" und teils weitere Klassen voran (theme.css, Bereich
   "body #order-standard_cart ..."). Die folgenden Regeln spiegeln genau diese
   Ketten, damit sie bei gleicher Stärke durch die spätere Ladeposition gewinnen
   oder das Elternteil um eine Klasse übertreffen.
   ------------------------------------------------------------------------ */

/* Produktkarten: nexus setzt .product und header auf white */
body #order-standard_cart .cart-body .products .product {
    padding: 0;
    background: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-radius: var(--mj-r-xl);
}

body #order-standard_cart .cart-body .products .product header {
    margin: 0;
    background: transparent;
    border-bottom: 1px solid var(--mj-line-soft);
}

body #order-standard_cart .cart-body .products .product footer {
    margin: 0;
    margin-top: auto;
}

/* Bestellknopf: nexus färbt ihn mit --bg-inverted, bei uns wäre das schwarz */
body #order-standard_cart .products .product footer .btn-order-now,
body #order-standard_cart .products .product footer .mj-btn-order {
    padding: .6rem 1.4rem;
    background: var(--mj-brand);
    border-color: var(--mj-brand);
    border-radius: var(--mj-r-pill);
    color: var(--mj-on-brand);
}

body #order-standard_cart .products .product footer .btn-order-now:hover,
body #order-standard_cart .products .product footer .btn-order-now:focus,
body #order-standard_cart .products .product footer .mj-btn-order:hover {
    background: var(--mj-brand-light);
    border-color: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

/* Seitenleiste: die Kategorienkarte trägt .panel, nexus macht .panel-heading white */
body #order-standard_cart .panel .panel-heading {
    background: transparent;
    border-radius: 0;
    color: var(--mj-text);
}

body #order-standard_cart .panel .panel-footer {
    background: transparent;
}

body #order-standard_cart .panel label {
    color: var(--mj-text-2);
}

/* Abschnittstrenner: nexus setzt #f8f9fa auf den span */
body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading span.primary-bg-color,
body #order-standard_cart .sub-heading-borderless span.primary-bg-color {
    background: var(--mj-black);
    color: var(--mj-text);
}

/* Reiter Gutschein / Steuer im Warenkorb */
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded=true],
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-selected=true],
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a.active {
    background-color: var(--mj-surface);
    border: 1px solid var(--mj-line-soft);
    border-bottom: 0;
    border-radius: var(--mj-r-md) var(--mj-r-md) 0 0;
    color: var(--mj-brand);
}

/* Kassenknopf */
body #order-standard_cart .text-right .btn-checkout {
    background: var(--mj-brand);
    border-color: var(--mj-brand);
    border-radius: var(--mj-r-pill);
    color: var(--mj-on-brand);
}

body #order-standard_cart .text-right .btn-checkout:hover,
body #order-standard_cart .text-right .btn-checkout:focus {
    background: var(--mj-brand-light);
    border-color: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

/* Beschriftungen: standard_cart setzt label auf #666 */
body #order-standard_cart label,
body #order-standard_cart .control-label,
body #order-standard_cart .radio,
body #order-standard_cart .radio-inline,
body #order-standard_cart .checkbox {
    color: var(--mj-text-2);
}

body #order-standard_cart .account-select-container .address,
body #order-standard_cart .account-select-container .address strong {
    color: var(--mj-text);
}

body #order-standard_cart .cart-body .view-cart-empty {
    background-color: var(--mj-surface);
}

body #order-standard_cart .domain-selection-options .option-selected {
    background: var(--mj-brand-a10);
}

/* MarketConnect-Werbung: Knopf mit dunkler Schrift auf dunklem Grund */
body #order-standard_cart .mc-promo .btn-add,
body #order-standard_cart .mc-promo .btn-add .text {
    background: var(--mj-brand);
    border-color: var(--mj-brand);
    color: var(--mj-on-brand);
}

/* ---------------------------------------------------------------------------
   Abnahme-Rundgang: Preis brach in schmalen Karten um ("3,30" / "EUR").
   Preisblock und Knopf duerfen jetzt untereinander rutschen, der Preis
   selbst bleibt einzeilig.
   ------------------------------------------------------------------------ */
body #order-standard_cart .cart-body .products .product footer {
    flex-wrap: wrap;
    gap: 12px 14px;
}

body #order-standard_cart .products .product div.product-pricing {
    flex: 1 1 150px;
    min-width: 0;
}

body #order-standard_cart .products .product div.product-pricing span.price {
    white-space: nowrap;
    font-size: clamp(1.4rem, 1.5vw + .6rem, 1.9rem);
}

body #order-standard_cart .products .product footer .btn-order-now,
body #order-standard_cart .products .product footer .mj-btn-order {
    flex: 0 1 auto;
    max-width: 100%;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   Kartenvarianten (Auswahl des Kunden nach dem Rundgang)
   - .mj-products--compact auf #products: ohne Merkmalsliste, grosser Preis
   - .mj-popular auf einer Karte: Verlaufsrahmen plus Stern-Badge. Gesetzt von
     products.tpl, wenn die Beschreibung das Wort [beliebt] enthaelt.
   ------------------------------------------------------------------------ */
body #order-standard_cart .mj-products--compact .product div.product-desc { display: none; }
body #order-standard_cart .mj-products--compact .product header { border-bottom: 0; padding-bottom: 4px; }
body #order-standard_cart .mj-products--compact .product footer { border-top: 0; padding-top: 6px; }
body #order-standard_cart .mj-products--compact .products .product div.product-pricing span.price,
body #order-standard_cart .mj-products--compact .product div.product-pricing span.price { font-size: 2.2rem; }

body #order-standard_cart .cart-body .products .product.mj-popular {
    border-color: transparent;
    background:
        linear-gradient(var(--mj-surface), var(--mj-surface)) padding-box,
        linear-gradient(135deg, var(--mj-brand), var(--mj-brand-a40), #27272a) border-box;
    border: 1.5px solid transparent;
}
body #order-standard_cart .products .product.mj-popular::before {
    content: "°5  " attr(data-popular-label);
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 3px 12px 4px;
    border-radius: 0 0 12px 12px;
    background: var(--mj-brand);
    color: var(--mj-on-brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}
body #order-standard_cart .products .product.mj-popular header { padding-top: 26px; }

/* ---------------------------------------------------------------------------
   Kategorienleiste oben statt Seitenleiste links
   Die Seitenleiste nahm ein Viertel der Breite und liess drei Karten je Reihe
   nur 265px. Jetzt liegen Kategorien als Pillen ueber dem Inhalt, der Inhalt
   nutzt die volle Breite. Layout-Floats des Originals bleiben unangetastet,
   nur die Breiten aendern sich.
   ------------------------------------------------------------------------ */
html body #order-standard_cart .cart-sidebar {
    float: none;
    width: 100%;
    padding: 0 15px;
    margin-bottom: 8px;
}

html body #order-standard_cart .cart-body {
    float: none;
    width: 100%;
}

html body #order-standard_cart .cart-sidebar .card,
html body #order-standard_cart .cart-sidebar .panel,
html body #order-standard_cart .cart-sidebar .card-sidebar {
    display: inline-flex;
    vertical-align: top;
    width: auto;
    margin: 0 10px 12px 0;
    background: transparent;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

html body #order-standard_cart .cart-sidebar .card-header,
html body #order-standard_cart .cart-sidebar .panel-heading,
html body #order-standard_cart .cart-sidebar .card-footer,
html body #order-standard_cart .cart-sidebar .panel-footer {
    display: none;
}

html body #order-standard_cart .cart-sidebar .collapsable-card-body,
html body #order-standard_cart .cart-sidebar .list-group {
    display: flex !important;   /* das Elternteil schaltet per Inline-Style display:none/block */
    flex-direction: row;        /* Bootstrap setzt .list-group auf column */
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
    border-radius: 0;
}

html body #order-standard_cart .cart-sidebar .list-group-item {
    width: auto !important;     /* Bootstrap: .list-group-item { width: 100% } */
    flex: 0 0 auto;
    padding: .45rem 1rem;
    margin: 0;
    border: 1px solid var(--mj-line) !important;
    border-radius: var(--mj-r-pill) !important;
    background: var(--mj-surface);
    color: var(--mj-muted);
    font-size: 13px;
    font-weight: 600;
}

html body #order-standard_cart .cart-sidebar .list-group-item:hover {
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

html body #order-standard_cart .cart-sidebar .list-group-item.active,
html body #order-standard_cart .cart-sidebar .list-group-item.active:hover {
    background: var(--mj-brand-a15);
    border-color: var(--mj-brand);
    color: var(--mj-brand);
}

html body #order-standard_cart .cart-sidebar .list-group-item.active::before { display: none; }

/* Das eingeklappte Mobil-Menue des Originals wird dadurch ueberfluessig */
html body #order-standard_cart .sidebar-collapsed { display: none; }

/* Warenkorb-Ansicht behaelt Inhalt links / Uebersicht rechts */
@media (max-width: 991.98px) {
    body #order-standard_cart .secondary-cart-body,
    body #order-standard_cart .secondary-cart-sidebar { float: none; width: 100%; }
}

/* ---------------------------------------------------------------------------
   Produktkarte wie auf der Hauptseite, zweite Fassung: groesser, mit
   Akzentschimmer oben, Namens-Pille, grosser Kennzahl, Merkmalen als
   Zeilenliste und Preis/Button in einer Zeile. Markup von js/mj-products.js.
   Alle Farben ueber var(--mj-brand*), damit die Gruppen-Akzente greifen.
   ------------------------------------------------------------------------ */

/* Mehr Platz: im Warenkorb duerfen Kopf, Inhalt und Fuss bis 1320px breit
   werden, drei Karten je Reihe bekommen dann 420px statt 360px */
@media (min-width: 1400px) {
    html body:has(#order-standard_cart) .container { max-width: 1320px; }
}
@media (min-width: 1600px) {
    html body:has(#order-standard_cart) .container { max-width: 1440px; }
}

html body #order-standard_cart .products .product.mj-product {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -30px rgba(0, 0, 0, .8);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Akzentschimmer und Lichtkante am oberen Rand */
html body #order-standard_cart .products .product.mj-product::before {
    content: '';
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 220px;
    background: radial-gradient(60% 80% at 50% 0%, var(--mj-brand-a20) 0%, transparent 70%);
    pointer-events: none;
}

html body #order-standard_cart .products .product.mj-product::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--mj-brand), transparent);
}

html body #order-standard_cart .products .product.mj-product:hover {
    transform: translateY(-4px);
    border-color: var(--mj-brand-a60);
    box-shadow: 0 30px 60px -30px var(--mj-brand-a40);
}

@media (prefers-reduced-motion: reduce) {
    html body #order-standard_cart .products .product.mj-product,
    html body #order-standard_cart .products .product.mj-product:hover { transition: none; transform: none; }
}

/* Kopf: Pille mit Namen, darunter die Kennzahl, darunter die Verfuegbarkeit */
html body #order-standard_cart .cart-body .products .product header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    padding: 30px 30px 18px;
    border: 0;
    background: transparent;
}

html body #order-standard_cart .products .product header .mj-pname {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-size: inherit;
}

html body #order-standard_cart .products .product header .mj-pname__name {
    display: inline-flex;
    align-items: center;
    padding: .3rem .8rem;
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand-a10);
    color: var(--mj-brand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html body #order-standard_cart .products .product header .mj-pname__value {
    color: var(--mj-text);
    font-size: 2.9rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    white-space: nowrap;
}

/* Name ohne Kennzahl (z. B. "Konfigurator"): kleiner und auf Hoehe der
   Kennzahl der Nachbarkarten, damit die Merkmallisten buendig liegen */
html body #order-standard_cart .products .product header .mj-pname__value--solo {
    font-size: 2.1rem;
    margin-top: 44px;
}

html body #order-standard_cart .products .product header .mj-pname__unit {
    margin-left: 6px;
    color: var(--mj-muted-2);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
}

html body #order-standard_cart .products .product header .qty.mj-pqty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    float: none;
    margin-top: 8px;
    color: var(--mj-muted-2);
    font-size: 12.5px;
}

html body #order-standard_cart .products .product header .qty.mj-pqty::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mj-brand);
    box-shadow: 0 0 0 3px var(--mj-brand-a20);
}

/* Merkmale als Zeilen mit Trennlinien, Haken im runden Akzentfeld */
html body #order-standard_cart .products .product div.product-desc { padding: 0 30px 18px; }

html body #order-standard_cart .products .product div.product-desc ul {
    padding: 6px 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--mj-line-soft);
    border-radius: 0;
}

html body #order-standard_cart .products .product div.product-desc li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--mj-line-soft);
    color: var(--mj-text-2);
    font-size: 14.5px;
}

html body #order-standard_cart .products .product div.product-desc li:last-child { border-bottom: 0; }

html body #order-standard_cart .products .product div.product-desc li::before {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mj-brand-a15);
    color: var(--mj-brand);
    font-size: 10px;
}

html body #order-standard_cart .products .product span.feature-value {
    color: var(--mj-text);
    font-weight: 700;
}

/* Fuss: "AB" klein, Preis gross, Button rechts daneben */
html body #order-standard_cart .cart-body .products .product footer {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 30px 30px;
    border: 0;
    background: transparent;
}

html body #order-standard_cart .products .product div.product-pricing {
    flex: 1 1 auto;
    text-align: left;
}

html body #order-standard_cart .products .product div.product-pricing .mj-price-label {
    display: block;
    margin-bottom: 4px;
    color: var(--mj-muted-2);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

html body #order-standard_cart .products .product div.product-pricing span.price {
    display: inline;
    color: var(--mj-text);
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

html body #order-standard_cart .products .product div.product-pricing br { display: none; }

html body #order-standard_cart .products .product div.product-pricing .cycle {
    color: var(--mj-muted-2);
    font-size: 13px;
}

html body #order-standard_cart .products .product footer .btn {
    padding: .8rem 1.4rem;
    border: 0;
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand);
    color: var(--mj-on-brand);
    font-size: 14.5px;
    font-weight: 700;
    box-shadow: 0 8px 24px -10px var(--mj-brand-a60);
}

html body #order-standard_cart .products .product footer .btn:hover {
    background: var(--mj-brand-light);
    color: var(--mj-on-brand);
}

/* Schmale Bildschirme: Preis und Button untereinander */
@media (max-width: 420px) {
    html body #order-standard_cart .cart-body .products .product footer { flex-wrap: wrap; }
    html body #order-standard_cart .products .product footer .btn { width: 100%; }
    html body #order-standard_cart .products .product header .mj-pname__value { font-size: 2.4rem; }
}


/* ---------------------------------------------------------------------------
   Produktkarten: mehr Luft zwischen den Reihen, gleichmaessig
   ------------------------------------------------------------------------ */
/* Die Karte fuellt ihre Spalte zu 100% Hoehe (row-eq-height), ein Rand an
   der Karte selbst wuerde ins Leere laufen - der Abstand sitzt an der Spalte */
html body #order-standard_cart .cart-body .products .row.row-eq-height > [class*="col-"] { margin-bottom: 32px; }
html body #order-standard_cart .cart-body .products .product.mj-product { margin-bottom: 0; }
html body #order-standard_cart .cart-body .products .row.row-eq-height { margin-bottom: -32px; }
html body #order-standard_cart .products .product div.product-desc { flex: 1 1 auto; }

/* ---------------------------------------------------------------------------
   Konfigurator wie auf der Hauptseite (cart.php?a=confproduct)
   Markup-Ergaenzungen von js/mj-configurator.js: .mj-opt-head, .mj-chips.
   Die Slider sind ion.rangeSlider 2.1 (Skin "Modern"); dessen Stylesheet
   laedt WHMCS erst im Seitenkoerper, deshalb hier mit hoher Spezifitaet.
   ------------------------------------------------------------------------ */

/* Produktkasten: Name gross, Merkmale als Chips */
html body #order-standard_cart .product-info {
    padding: 22px 24px;
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
}

html body #order-standard_cart .product-info .product-title {
    margin: 0 0 12px;
    font-size: 1.35rem;
    letter-spacing: -.02em;
}

html body #order-standard_cart .mj-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html body #order-standard_cart .mj-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: .35rem .75rem;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: rgba(255, 255, 255, .03);
    color: var(--mj-text-2);
    font-size: 12.5px;
    line-height: 1.2;
}

html body #order-standard_cart .mj-chip i { color: var(--mj-brand); font-size: 10px; }
html body #order-standard_cart .mj-chip b { color: var(--mj-text); font-weight: 600; }

/* Optionen: jede in einer eigenen Zeile mit Kopf (Name links, Wert rechts) */
html body #frmConfigureProduct .form-group.mj-opt { margin-bottom: 26px; }

html body #frmConfigureProduct .mj-opt--slider .mj-opt-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

html body #frmConfigureProduct .mj-opt-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

html body #frmConfigureProduct .mj-opt-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mj-text);
    font-size: 14px;
    font-weight: 600;
}

html body #frmConfigureProduct .mj-opt-name i {
    width: 18px;
    color: var(--mj-brand);
    font-size: 14px;
    text-align: center;
}

html body #frmConfigureProduct .mj-opt-value {
    color: var(--mj-text);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

html body #frmConfigureProduct .mj-opt-value .mj-opt-num { font-size: 17px; }
html body #frmConfigureProduct .mj-opt-value .mj-opt-unit { color: var(--mj-text-2); font-weight: 600; }

html body #frmConfigureProduct .mj-opt-value .mj-opt-price {
    margin-left: 6px;
    color: var(--mj-muted-2);
    font-size: 12px;
    font-weight: 500;
}

/* ion.rangeSlider: Spur, Fuellung, Griff, Skala */
html body #frmConfigureProduct .irs {
    height: 44px;
    margin: 2px 10px 0;         /* Platz fuer den Griff an beiden Enden */
    font-family: inherit;
}

html body #frmConfigureProduct .irs-with-grid { height: 48px; }

html body #frmConfigureProduct .irs .irs-line {
    top: 12px;
    height: 6px;
    border: 0;
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface-3);
}

html body #frmConfigureProduct .irs .irs-line-left,
html body #frmConfigureProduct .irs .irs-line-mid,
html body #frmConfigureProduct .irs .irs-line-right {
    height: 6px;
    background: transparent;
}

html body #frmConfigureProduct .irs .irs-bar,
html body #frmConfigureProduct .irs .irs-bar-edge {
    top: 12px;
    height: 6px;
    border: 0;
    border-radius: var(--mj-r-pill);
    background: linear-gradient(90deg, var(--mj-brand-a60), var(--mj-brand));
}

html body #frmConfigureProduct .irs .irs-slider {
    top: 5px;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border: 3px solid var(--mj-brand);
    border-radius: 50%;
    background: var(--mj-surface);
    box-shadow: 0 0 0 4px var(--mj-brand-a20);
    cursor: grab;
    transition: box-shadow .15s ease, transform .15s ease;
}

html body #frmConfigureProduct .irs .irs-slider:hover,
html body #frmConfigureProduct .irs .irs-slider.state_hover { transform: scale(1.08); box-shadow: 0 0 0 6px var(--mj-brand-a25); }
html body #frmConfigureProduct .irs .irs-slider:active { cursor: grabbing; }
html body #frmConfigureProduct .irs .irs-slider::before { display: none; }   /* Skin Modern: kleiner Stift ueber dem Griff */

/* Wert- und Grenzblasen aus: der Wert steht rechts im Kopf */
html body #frmConfigureProduct .irs .irs-single,
html body #frmConfigureProduct .irs .irs-from,
html body #frmConfigureProduct .irs .irs-to,
html body #frmConfigureProduct .irs .irs-min,
html body #frmConfigureProduct .irs .irs-max { display: none; }

html body #frmConfigureProduct .irs .irs-grid { bottom: 0; height: 18px; }
html body #frmConfigureProduct .irs .irs-grid-pol { display: none; }
html body #frmConfigureProduct .irs .irs-grid-text {
    bottom: 0;
    color: var(--mj-muted-2);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Auswahlfelder: Label wie die Slider-Kopfzeile */
html body #frmConfigureProduct .mj-opt--field > label {
    color: var(--mj-text);
    font-size: 14px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Laufzeit als Pillen (Konfigurator): das Dropdown #inputBillingcycle bleibt
   im DOM und wird von js/mj-configurator.js gespiegelt; Rabatt-Badge oben
   rechts, Gesamtpreis der Laufzeit klein darunter.
   ------------------------------------------------------------------------ */
html body #order-standard_cart select.mj-cycle-select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
    pointer-events: none;
}

html body #order-standard_cart .mj-cycles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 6px;
}

html body #order-standard_cart .mj-cycle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 116px;
    padding: .55rem 1.1rem .5rem;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface);
    color: var(--mj-text-2);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

html body #order-standard_cart .mj-cycle:hover {
    border-color: var(--mj-line-strong);
    color: var(--mj-text);
}

html body #order-standard_cart .mj-cycle:focus-visible {
    outline: 2px solid var(--mj-brand);
    outline-offset: 2px;
}

html body #order-standard_cart .mj-cycle.is-active {
    border-color: var(--mj-brand);
    background: var(--mj-brand);
    color: var(--mj-on-brand);
}

html body #order-standard_cart .mj-cycle__label {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

html body #order-standard_cart .mj-cycle__price {
    margin-top: 1px;
    font-size: 11.5px;
    font-weight: 500;
    opacity: .8;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

html body #order-standard_cart .mj-cycle__badge {
    position: absolute;
    top: -9px;
    right: 10px;
    padding: 1px 7px;
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface-2);
    color: var(--mj-brand);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

html body #order-standard_cart .mj-cycle.is-active .mj-cycle__badge {
    border-color: var(--mj-brand);
    background: var(--mj-on-brand);
}


/* ---- Quelle: 45-checkout.css ---------------------------------------- */
/* ============================================================================
   45 - Warenkorb-Uebersicht und Kasse (mamjahn_cart/viewcart.tpl, checkout.tpl)
   Zweispaltig: links die Schritte, rechts die klebrige Bestelluebersicht.
   ========================================================================== */

/* ---- Rahmen und Kopf ---------------------------------------------------- */
body #order-standard_cart .mj-co-wrap { max-width: 1180px; margin: 0 auto; }
body #order-standard_cart .mj-co-body { padding: 0; }

body #order-standard_cart .mj-co-head { margin: 6px 0 26px; }
body #order-standard_cart .mj-co-head h1 { margin: 0 0 6px; color: var(--mj-text); font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }
body #order-standard_cart .mj-co-head p { margin: 0; color: var(--mj-muted-2); font-size: 14px; }

/* Fortschritt 1 -> 2 -> 3 */
body #order-standard_cart .mj-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    color: var(--mj-muted-2);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body #order-standard_cart .mj-steps li { display: inline-flex; align-items: center; gap: 8px; }
body #order-standard_cart .mj-steps li + li::before {
    content: "";
    display: block;
    width: 44px;
    height: 1px;
    margin: 0 14px;
    background: var(--mj-line);
}
body #order-standard_cart .mj-steps li span {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--mj-line-strong);
    border-radius: 50%;
    font-size: 11px;
    letter-spacing: 0;
}
body #order-standard_cart .mj-steps li.is-active { color: var(--mj-text); }
body #order-standard_cart .mj-steps li.is-active span { border-color: var(--mj-brand); background: var(--mj-brand); color: var(--mj-on-brand); box-shadow: 0 0 0 4px var(--mj-brand-a20); }
body #order-standard_cart .mj-steps li.is-done span { border-color: var(--mj-brand-a60); color: var(--mj-brand); }
body #order-standard_cart .mj-steps li.is-done + li::before { background: var(--mj-brand-a40); }

/* Umschalter "schon Kunde / neues Konto" (nur Gaeste) */
body #order-standard_cart .mj-co-switch { display: flex; gap: 8px; margin: 0 0 18px; }
body #order-standard_cart .mj-co-switch .btn { border-radius: var(--mj-r-pill); }

/* ---- Zwei Spalten ------------------------------------------------------- */
body #order-standard_cart .mj-co {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 991.98px) {
    body #order-standard_cart .mj-co { grid-template-columns: 1fr; }
}

body #order-standard_cart .mj-co-main {
    min-width: 0;
    padding: 14px 30px 30px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
    counter-reset: mjstep;
}

/* Zwischenueberschriften werden zu nummerierten Schritten */
body #order-standard_cart .mj-co-main .sub-heading,
body #order-standard_cart .mj-co-main .sub-heading-borderless {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 16px;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}
body #order-standard_cart .mj-co-main .sub-heading::before,
body #order-standard_cart .mj-co-main .sub-heading-borderless::before {
    counter-increment: mjstep;
    content: counter(mjstep);
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mj-brand-a15);
    color: var(--mj-brand);
    font-size: 13px;
    font-weight: 800;
}
body #order-standard_cart .mj-co-main .sub-heading::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--mj-line-soft); }
body #order-standard_cart .mj-co-main .sub-heading span,
body #order-standard_cart .mj-co-main .sub-heading span.primary-bg-color,
body #order-standard_cart .mj-co-main .sub-heading-borderless span.primary-bg-color {
    position: static;
    padding: 0;
    background: none !important;
    color: var(--mj-text);
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
}
/* Nur die Ueberschriften sichtbarer Bloecke zaehlen (w-hidden = display:none) */
body #order-standard_cart .mj-co-main .w-hidden .sub-heading::before { counter-increment: none; }

/* Konten-Auswahl als Karten */
body #order-standard_cart .mj-co-main .account-select-container .row { margin: 0 -6px; }
body #order-standard_cart .mj-co-main .account-select-container .row > [class*="col-"] { padding: 0 6px; margin-bottom: 12px; }
body #order-standard_cart .mj-co-main .account-select-container div.account,
body #order-standard_cart .mj-co-main .account-select-container div.account.border-bottom {
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--mj-line) !important;
    border-radius: 16px;
    background: var(--mj-surface);
    transition: border-color .2s ease, background .2s ease;
}
body #order-standard_cart .mj-co-main .account-select-container div.account.active { border-color: var(--mj-brand-a60) !important; background: var(--mj-brand-a10); }
body #order-standard_cart .mj-co-main .account-select-container .address { display: block; margin-top: 6px; color: var(--mj-muted-2); font-size: 12.5px; }
body #order-standard_cart .mj-co-main .account-select-container label { margin: 0; width: 100%; cursor: pointer; }

/* Guthaben und Zahlungsarten */
body #order-standard_cart .mj-co-main .apply-credit-container { margin-bottom: 14px; padding: 16px 18px; border-radius: 16px; }
body #order-standard_cart .mj-co-main .apply-credit-container p { margin: 0 0 8px; color: var(--mj-text); font-weight: 700; }
body #order-standard_cart .mj-co-main .apply-credit-container label.radio { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; padding: 0; color: var(--mj-text-2); font-size: 13.5px; font-weight: 500; line-height: 1.5; cursor: pointer; }
body #order-standard_cart .mj-co-main .apply-credit-container label.radio span span { color: var(--mj-text); font-weight: 700; }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer { margin: 0; padding: 16px 18px; border: 1px solid var(--mj-line-soft); border-radius: 16px; background: var(--mj-surface); }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer p.small { margin: 0 0 10px; color: var(--mj-muted-2); }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer .text-center { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer .radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 16px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-pill);
    background: var(--mj-surface-2);
    color: var(--mj-text-2);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
body #order-standard_cart .mj-co-main #paymentGatewaysContainer .radio-inline:hover { border-color: var(--mj-line-strong); color: var(--mj-text); }
body #order-standard_cart .mj-co-main #creditCardInputFields { margin-top: 14px; border-radius: 16px; }

/* Anmerkungen */
body #order-standard_cart .mj-co-main textarea { min-height: 96px; border-radius: 14px; }

/* ---- Rechte Spalte ------------------------------------------------------ */
body #order-standard_cart .mj-co-side {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body #order-standard_cart .mj-co-summary {
    position: relative;
    overflow: hidden;
    padding: 22px 24px 20px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
}
body #order-standard_cart .mj-co-summary::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--mj-brand), transparent);
}
body #order-standard_cart .mj-co-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
body #order-standard_cart .mj-co-summary-head h2 { margin: 0; color: var(--mj-text); font-size: 1.05rem; font-weight: 800; }
body #order-standard_cart .mj-co-summary-edit { flex: 0 0 auto; padding: 4px 10px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); color: var(--mj-muted-2); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
body #order-standard_cart .mj-co-summary-edit:hover { border-color: var(--mj-brand-a60); color: var(--mj-brand); text-decoration: none; }

body #order-standard_cart .mj-co-items { margin: 0 0 14px; padding: 0; list-style: none; }
body #order-standard_cart .mj-co-items li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--mj-line-soft);
}
body #order-standard_cart .mj-co-items li:first-child { border-top: 0; padding-top: 0; }
body #order-standard_cart .mj-co-items li > i {
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--mj-brand-a15);
    color: var(--mj-brand);
    font-size: 14px;
}
body #order-standard_cart .mj-co-items li b { display: block; color: var(--mj-text); font-size: 14px; font-weight: 700; }
body #order-standard_cart .mj-co-items li small { display: block; color: var(--mj-muted-2); font-size: 12.5px; }
body #order-standard_cart .mj-co-items li code {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--mj-surface-3);
    color: var(--mj-text-2);
    font-size: 11.5px;
}

body #order-standard_cart .mj-co-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--mj-line);
}
body #order-standard_cart .mj-co-total span { color: var(--mj-muted-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body #order-standard_cart .mj-co-total strong { color: var(--mj-brand); font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
body #order-standard_cart .mj-co-vat { display: flex; gap: 8px; margin: 12px 0 0; color: var(--mj-muted-2); font-size: 12px; line-height: 1.5; text-align: left; }
body #order-standard_cart .mj-co-vat i { margin-top: 2px; color: var(--mj-brand); }

body #order-standard_cart .mj-co-tos {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--mj-line);
    border-radius: 14px;
    background: var(--mj-surface);
    color: var(--mj-text-2);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}
body #order-standard_cart .mj-co-tos input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--mj-brand); }
body #order-standard_cart .mj-co-tos a { color: var(--mj-brand); font-weight: 700; }

body #order-standard_cart .btn.mj-co-submit {
    padding: 16px 22px;
    border-radius: var(--mj-r-pill);
    font-size: 15.5px;
    font-weight: 800;
    box-shadow: 0 14px 30px -12px var(--mj-brand-a60);
}
body #order-standard_cart .mj-co-secure { display: block; margin: 0; padding: 0 4px; color: var(--mj-muted-2); font-size: 11.5px; line-height: 1.5; text-align: center; }
body #order-standard_cart .mj-co-secure i { margin-right: 4px; color: var(--mj-ok); }
body #order-standard_cart .mj-co-secure strong { color: var(--mj-text-2); }

/* ---- Widerrufs-Hinweis --------------------------------------------------- */
body #order-standard_cart .mj-norefund {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 18px;
    border: 1px solid rgba(245, 158, 11, .45);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, rgba(245, 158, 11, .10), rgba(245, 158, 11, .04));
    text-align: left;
    transition: border-color .25s ease, background .25s ease;
}
body #order-standard_cart .mj-norefund.is-ok {
    border-color: var(--mj-brand-a60);
    background: linear-gradient(180deg, var(--mj-brand-a10), transparent);
}
body #order-standard_cart .mj-norefund-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .18);
    color: #fbbf24;
    font-size: 16px;
}
body #order-standard_cart .mj-norefund.is-ok .mj-norefund-icon { background: var(--mj-brand-a15); color: var(--mj-brand); }
body #order-standard_cart .mj-norefund-body { min-width: 0; }
body #order-standard_cart .mj-norefund h4 { margin: 4px 0 6px; color: var(--mj-text); font-size: 14.5px; font-weight: 800; }
body #order-standard_cart .mj-norefund p { margin: 0 0 10px; color: var(--mj-text-2); font-size: 12.5px; line-height: 1.55; }
body #order-standard_cart .mj-norefund-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--mj-line);
    border-radius: 12px;
    background: rgba(0, 0, 0, .25);
    color: var(--mj-text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}
body #order-standard_cart .mj-norefund-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--mj-brand); cursor: pointer; }
body #order-standard_cart .mj-norefund-links { margin: 0; font-size: 12px; }
body #order-standard_cart .mj-norefund-links a { color: var(--mj-brand); font-weight: 600; }
body .mj-norefund-modal .modal-content { border: 1px solid var(--mj-line); border-radius: 20px; background: var(--mj-surface-2); color: var(--mj-text); }
body .mj-norefund-modal .modal-header,
body .mj-norefund-modal .modal-footer { border-color: var(--mj-line-soft); }
body .mj-norefund-modal .modal-title { display: flex; align-items: center; gap: 10px; font-weight: 800; }
body .mj-norefund-modal .modal-title i { color: #fbbf24; }
body .mj-norefund-modal .modal-body p { color: var(--mj-text-2); line-height: 1.6; }
body .mj-norefund-modal .close { color: var(--mj-text); opacity: .7; text-shadow: none; }

/* ---- Warenkorb-Uebersicht (viewcart.tpl) --------------------------------- */
body #order-standard_cart.mj-viewcart .cart-body > .row { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; margin: 0; }
body #order-standard_cart.mj-viewcart .cart-body > .row > .secondary-cart-body,
body #order-standard_cart.mj-viewcart .cart-body > .row > .secondary-cart-sidebar { width: auto; max-width: none; flex: none; padding: 0; }
body #order-standard_cart.mj-viewcart .secondary-cart-sidebar { position: sticky; top: 96px; }
@media (max-width: 991.98px) {
    body #order-standard_cart.mj-viewcart .cart-body > .row { grid-template-columns: 1fr; }
    body #order-standard_cart.mj-viewcart .secondary-cart-sidebar { position: static; }
}

body #order-standard_cart.mj-viewcart .view-cart-items { display: flex; flex-direction: column; gap: 14px; margin: 0 0 12px; }
body #order-standard_cart.mj-viewcart .view-cart-items .item,
body #order-standard_cart.mj-viewcart .view-cart-items .item:last-child {
    position: relative;
    padding: 22px 24px;
    border: 1px solid var(--mj-line);
    border-radius: var(--mj-r-xl);
    background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
body #order-standard_cart.mj-viewcart .view-cart-items .item::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--mj-brand-a60), transparent);
}
body #order-standard_cart.mj-viewcart .view-cart-items .item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1.15rem; }
body #order-standard_cart.mj-viewcart .view-cart-items .item-title .btn-link { padding: 2px 8px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); color: var(--mj-muted-2); font-size: 11.5px; font-weight: 700; }
body #order-standard_cart.mj-viewcart .view-cart-items .item-title .btn-link:hover { border-color: var(--mj-brand-a60); color: var(--mj-brand); text-decoration: none; }
body #order-standard_cart.mj-viewcart .view-cart-items .item-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; width: auto; }
body #order-standard_cart.mj-viewcart .mj-cart-host {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--mj-brand-a40);
    border-radius: var(--mj-r-pill);
    background: var(--mj-brand-a10);
    color: var(--mj-brand);
    font-size: 12px;
    font-weight: 700;
}
body #order-standard_cart.mj-viewcart .mj-cart-opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
body #order-standard_cart.mj-viewcart .mj-cart-opts li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--mj-line-soft); font-size: 12.5px; line-height: 1.4; }
body #order-standard_cart.mj-viewcart .mj-cart-opts li span { flex: 1 1 auto; color: var(--mj-muted-2); }
@media (max-width: 575.98px) { body #order-standard_cart.mj-viewcart .mj-cart-opts { grid-template-columns: 1fr; } }
body #order-standard_cart.mj-viewcart .mj-cart-opts li b { color: var(--mj-text); font-weight: 700; text-align: right; white-space: nowrap; }
body #order-standard_cart.mj-viewcart .view-cart-items .item-price span { font-size: 1.5rem; }
body #order-standard_cart.mj-viewcart .view-cart-items .item-price .cycle { display: block; font-size: 12px; }
body #order-standard_cart.mj-viewcart .view-cart-items .btn-remove-from-cart { width: 30px; height: 30px; padding: 0; border: 1px solid var(--mj-line); border-radius: 50%; }
body #order-standard_cart.mj-viewcart .view-cart-items .btn-remove-from-cart:hover { border-color: var(--mj-err); }
body #order-standard_cart.mj-viewcart .empty-cart { margin: 0 0 18px; text-align: right; }
body #order-standard_cart.mj-viewcart .empty-cart .btn { border: 1px solid var(--mj-line); border-radius: var(--mj-r-pill); background: transparent; }
body #order-standard_cart.mj-viewcart .view-cart-empty { border: 1px dashed var(--mj-line); border-radius: var(--mj-r-xl); }

/* Angebotscode kompakt */
body #order-standard_cart.mj-viewcart .view-cart-tabs { margin-top: 8px; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .nav-tabs { border: 0; margin: 0 0 8px; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .nav-tabs .nav-link,
body #order-standard_cart.mj-viewcart .view-cart-tabs .nav-tabs a.active { padding: 0 2px 6px; border: 0; background: none; color: var(--mj-muted-2); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .tab-content { border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface); }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo { display: flex; gap: 10px; align-items: center; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .form-group { flex: 1 1 auto; margin: 0; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo form { display: flex; gap: 10px; align-items: center; width: 100%; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .btn-block { width: auto; margin: 0; padding: 9px 18px; border-radius: var(--mj-r-pill); white-space: nowrap; }

/* Bestelluebersicht rechts im gleichen Kartenstil */
body #order-standard_cart.mj-viewcart .order-summary { position: relative; overflow: hidden; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); }
body #order-standard_cart.mj-viewcart .order-summary::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mj-brand), transparent); }
body #order-standard_cart.mj-viewcart .order-summary h2 { border: 0; background: none; padding: 22px 24px 8px; }
body #order-standard_cart.mj-viewcart .summary-container { border: 0; background: none; padding: 0 24px 22px; }
body #order-standard_cart.mj-viewcart .total-due-today { padding: 16px 0 6px; border-top: 1px solid var(--mj-line); text-align: right; }
body #order-standard_cart.mj-viewcart .total-due-today .amt { display: block; color: var(--mj-brand); font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
body #order-standard_cart.mj-viewcart .total-due-today span:not(.amt) { color: var(--mj-muted-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body #order-standard_cart.mj-viewcart .mj-cart-actions { margin-top: 16px; text-align: center; }
body #order-standard_cart.mj-viewcart .mj-cart-actions .btn-checkout { padding: 16px 22px; border-radius: var(--mj-r-pill); font-size: 15.5px; font-weight: 800; box-shadow: 0 14px 30px -12px var(--mj-brand-a60); }
body #order-standard_cart.mj-viewcart .mj-cart-actions .btn-continue-shopping { display: inline-block; margin-top: 10px; color: var(--mj-muted-2); font-size: 13px; font-weight: 600; }
body #order-standard_cart.mj-viewcart .mj-cart-actions .btn-continue-shopping:hover { color: var(--mj-text); text-decoration: none; }
body #order-standard_cart.mj-viewcart .mj-cart-actions .mj-co-vat { text-align: left; }
body #order-standard_cart.mj-viewcart .summary-container > div.clearfix,
body #order-standard_cart.mj-viewcart .summary-container .bordered-totals > div,
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: var(--mj-text-2); font-size: 13.5px; }
body #order-standard_cart.mj-viewcart .summary-container .subtotal { padding: 0 0 7px; font-size: 14px; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals .recurring-charges { text-align: right; color: var(--mj-muted-2); font-size: 12.5px; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals .cost { color: var(--mj-text); font-weight: 700; }

/* ---- Bestellbestaetigung, Fehler, Zusatzprodukte (Block 5) --------------- */
body #order-standard_cart .mj-done-card { position: relative; max-width: 720px; margin: 0 auto; padding: 40px 36px 32px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); text-align: center; overflow: hidden; }
body #order-standard_cart .mj-done-card::after { content: ""; position: absolute; left: 36px; right: 36px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mj-brand), transparent); }
body #order-standard_cart .mj-done-icon { display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 16px; border-radius: 50%; background: rgba(34, 197, 94, .15); color: var(--mj-ok); font-size: 32px; box-shadow: 0 0 0 10px rgba(34, 197, 94, .06); }
body #order-standard_cart .mj-done-icon.is-err { background: rgba(239, 68, 68, .15); color: var(--mj-err); box-shadow: 0 0 0 10px rgba(239, 68, 68, .06); }
body #order-standard_cart .mj-done-card h1 { margin: 0 0 8px; color: var(--mj-text); font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
body #order-standard_cart .mj-done-lead { margin: 0 0 18px; color: var(--mj-text-2); font-size: 15px; }
body #order-standard_cart .mj-done-no { display: inline-flex; flex-direction: column; gap: 4px; margin: 0 0 18px; padding: 14px 28px; border: 1px dashed var(--mj-brand-a60); border-radius: 16px; background: var(--mj-brand-a10); }
body #order-standard_cart .mj-done-no span { color: var(--mj-muted-2); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
body #order-standard_cart .mj-done-no b { color: var(--mj-text); font-size: 1.6rem; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
body #order-standard_cart .mj-done-text { margin: 0 0 18px; color: var(--mj-muted-2); font-size: 13.5px; line-height: 1.6; }
body #order-standard_cart .mj-done-card .mj-notice { text-align: left; }
body #order-standard_cart .mj-notice { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 18px; border: 1px solid var(--mj-line); border-radius: 16px; background: var(--mj-surface-2); color: var(--mj-text-2); font-size: 13.5px; }
body #order-standard_cart .mj-notice > div { flex: 1 1 auto; }
body #order-standard_cart .mj-notice > i { font-size: 18px; color: var(--mj-brand); }
body #order-standard_cart .mj-notice.is-warning { border-color: rgba(245, 158, 11, .45); } body #order-standard_cart .mj-notice.is-warning > i { color: #fbbf24; }
body #order-standard_cart .mj-notice.is-danger { border-color: rgba(239, 68, 68, .45); } body #order-standard_cart .mj-notice.is-danger > i { color: var(--mj-err); }
body #order-standard_cart .mj-notice.is-success { border-color: rgba(34, 197, 94, .45); } body #order-standard_cart .mj-notice.is-success > i { color: var(--mj-ok); }
body #order-standard_cart .btn.mj-pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--mj-r-pill); font-size: 13px; font-weight: 700; white-space: nowrap; }
body #order-standard_cart .btn.mj-pill-btn.btn-default { border: 1px solid var(--mj-line); background: var(--mj-surface-2); color: var(--mj-text-2); }
body #order-standard_cart .mj-done-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 6px 0 20px; }
body #order-standard_cart .mj-done-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--mj-line); border-radius: 14px; background: var(--mj-surface); color: var(--mj-text-2); text-align: left; text-decoration: none; }
body #order-standard_cart .mj-done-link:hover { border-color: var(--mj-brand-a60); color: var(--mj-text); text-decoration: none; }
body #order-standard_cart .mj-done-link > i { display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--mj-brand-a15); color: var(--mj-brand); }
body #order-standard_cart .mj-done-link b { display: block; color: var(--mj-text); font-size: 13.5px; }
body #order-standard_cart .mj-done-link small { display: block; color: var(--mj-muted-2); font-size: 12px; }
body #order-standard_cart .btn.mj-done-btn { display: inline-flex; width: auto; min-width: 280px; }
body #order-standard_cart .order-confirmation-addon-output { margin: 0 0 16px; text-align: left; }
body #order-standard_cart .mj-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Zusatzprodukte */
body #order-standard_cart .mj-addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
body #order-standard_cart .mj-addon-card { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 24px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-xl); background: linear-gradient(180deg, #121216 0%, #0c0c0f 100%); }
body #order-standard_cart .mj-addon-card:hover { border-color: var(--mj-brand-a60); }
body #order-standard_cart .mj-addon-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--mj-brand-a15); color: var(--mj-brand); font-size: 18px; }
body #order-standard_cart .mj-addon-card h2 { margin: 4px 0 0; color: var(--mj-text); font-size: 1.15rem; font-weight: 800; }
body #order-standard_cart .mj-addon-desc { flex: 1 1 auto; margin: 0; color: var(--mj-text-2); font-size: 13.5px; line-height: 1.55; }
body #order-standard_cart .mj-addon-card .mj-label { display: block; margin: 6px 0 4px; color: var(--mj-muted-2); font-size: 12px; font-weight: 700; }
body #order-standard_cart .mj-addon-card .custom-select { height: auto; padding: 10px 34px 10px 14px; border: 1px solid var(--mj-line); border-radius: 12px; background-color: var(--mj-surface-3); color: var(--mj-text); }
body #order-standard_cart .mj-addon-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--mj-line-soft); }
body #order-standard_cart .mj-addon-price b { display: block; color: var(--mj-text); font-size: 1.3rem; font-weight: 800; }
body #order-standard_cart .mj-addon-price small { color: var(--mj-muted-2); font-size: 12px; }

/* ---- Kasse: mehr Luft, groessere Kaesten (Feinschliff 13.09.) ------------- */
body #order-standard_cart .mj-co-wrap { max-width: 1320px; }
body #order-standard_cart .mj-co-head { margin: 8px 0 30px; }
body #order-standard_cart .mj-co-head h1 { font-size: 2.3rem; }
body #order-standard_cart .mj-co-head p { font-size: 15px; }
body #order-standard_cart .mj-co { grid-template-columns: minmax(0, 1fr) 440px; gap: 32px; }
body #order-standard_cart .mj-co-main { padding: 24px 36px 36px; }
body #order-standard_cart .mj-co-main .sub-heading, body #order-standard_cart .mj-co-main .sub-heading-borderless { margin: 30px 0 18px; }
body #order-standard_cart .mj-co-main .sub-heading::before, body #order-standard_cart .mj-co-main .sub-heading-borderless::before { flex-basis: 34px; width: 34px; height: 34px; font-size: 14px; }
body #order-standard_cart .mj-co-main .sub-heading span, body #order-standard_cart .mj-co-main .sub-heading span.primary-bg-color { font-size: 17px; }
body #order-standard_cart .mj-co-main .account-select-container div.account, body #order-standard_cart .mj-co-main .account-select-container div.account.border-bottom { padding: 20px 22px; border-radius: 18px; font-size: 15px; }
body #order-standard_cart .mj-co-main .account-select-container .row > [class*="col-"] { margin-bottom: 14px; }
body #order-standard_cart .mj-co-main .account-select-container .address { font-size: 13.5px; }
body #order-standard_cart .mj-co-main .apply-credit-container { padding: 20px 22px; border-radius: 18px; }
body #order-standard_cart .mj-co-main .apply-credit-container p { font-size: 15px; }
body #order-standard_cart .mj-co-main .apply-credit-container label.radio { font-size: 14.5px; margin-top: 10px; }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer { padding: 20px 22px; border-radius: 18px; }
body #order-standard_cart .mj-co-main #paymentGatewaysContainer .radio-inline { padding: 11px 18px; font-size: 14.5px; }
body #order-standard_cart .mj-co-main textarea { min-height: 120px; padding: 14px 16px; font-size: 14.5px; }
body #order-standard_cart .mj-co-main .form-control { font-size: 14.5px; }

body #order-standard_cart .mj-co-side { gap: 18px; }
body #order-standard_cart .mj-co-summary { padding: 26px 28px 24px; }
body #order-standard_cart .mj-co-summary-head h2 { font-size: 1.2rem; }
body #order-standard_cart .mj-co-summary-head { margin-bottom: 18px; }
body #order-standard_cart .mj-co-items li { padding: 14px 0; gap: 14px; }
body #order-standard_cart .mj-co-items li > i { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
body #order-standard_cart .mj-co-items li b { font-size: 15px; }
body #order-standard_cart .mj-co-items li small { font-size: 13px; }
body #order-standard_cart .mj-co-items li code { font-size: 12.5px; padding: 3px 9px; }
body #order-standard_cart .mj-co-total { padding: 20px 0 6px; }
body #order-standard_cart .mj-co-total strong { font-size: 2.5rem; }
body #order-standard_cart .mj-co-vat { font-size: 12.5px; margin-top: 12px; }
body #order-standard_cart .mj-norefund { padding: 22px 22px 20px; gap: 16px; }
body #order-standard_cart .mj-norefund-icon { flex-basis: 42px; width: 42px; height: 42px; font-size: 18px; }
body #order-standard_cart .mj-norefund h4 { font-size: 15.5px; }
body #order-standard_cart .mj-norefund p { font-size: 13.5px; }
body #order-standard_cart .mj-norefund-check { padding: 12px 14px; font-size: 13.5px; }
body #order-standard_cart .mj-norefund-links { font-size: 12.5px; }
body #order-standard_cart .mj-co-tos { padding: 16px 18px; font-size: 13.5px; }
body #order-standard_cart .btn.mj-co-submit { padding: 18px 24px; font-size: 16.5px; }
body #order-standard_cart .mj-co-secure { font-size: 12px; }
@media (max-width: 991.98px) { body #order-standard_cart .mj-co { grid-template-columns: 1fr; } body #order-standard_cart .mj-co-main { padding: 18px 20px 26px; } }

/* Bestellbestaetigung: breiter, Kacheln buendig, Pfeil mit Abstand */
body #order-standard_cart .mj-done-card { max-width: 860px; padding: 48px 44px 40px; }
body #order-standard_cart .mj-done-card h1 { font-size: 2.2rem; }
body #order-standard_cart .mj-done-lead { font-size: 16px; }
body #order-standard_cart .mj-done-no { padding: 16px 34px; }
body #order-standard_cart .mj-done-no b { font-size: 1.8rem; }
body #order-standard_cart .mj-done-text { font-size: 14px; max-width: 620px; margin-left: auto; margin-right: auto; }
body #order-standard_cart .mj-done-next { grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 26px; }
body #order-standard_cart .mj-done-link { align-items: flex-start; padding: 16px; }
body #order-standard_cart .mj-done-link > i { margin-top: 2px; width: 40px; height: 40px; flex-basis: 40px; }
body #order-standard_cart .mj-done-link b { font-size: 14.5px; margin-bottom: 2px; }
body #order-standard_cart .mj-done-link small { font-size: 12.5px; line-height: 1.45; }
body #order-standard_cart .btn.mj-done-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 300px; padding: 16px 28px; }
@media (max-width: 767.98px) { body #order-standard_cart .mj-done-next { grid-template-columns: 1fr; } body #order-standard_cart .mj-done-card { padding: 32px 22px 28px; } }

/* ---- Warenkorb: Angebotscode-Symbol, Summenzeilen ohne doppelte Linien ------ */
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .prepend-icon { position: relative; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .prepend-icon .field-icon { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--mj-muted-2); pointer-events: none; z-index: 2; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .prepend-icon .field-icon i { font-size: 14px; }
body #order-standard_cart.mj-viewcart .view-cart-tabs .promo .prepend-icon input.field { padding-left: 44px !important; }
body #order-standard_cart.mj-viewcart .summary-container .subtotal,
body #order-standard_cart.mj-viewcart .summary-container .bordered-totals,
body #order-standard_cart.mj-viewcart .summary-container .bordered-totals > div,
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals { border: 0 !important; margin: 0; }
body #order-standard_cart.mj-viewcart .summary-container > div.clearfix,
body #order-standard_cart.mj-viewcart .summary-container .bordered-totals > div,
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals { padding: 9px 0; border-bottom: 1px solid var(--mj-line-soft) !important; align-items: baseline; }
body #order-standard_cart.mj-viewcart .summary-container .subtotal { padding-top: 0; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-totals { border-bottom: 0 !important; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-charges { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-charges > span { display: inline-flex; gap: 6px; align-items: baseline; white-space: nowrap; }
body #order-standard_cart.mj-viewcart .summary-container .recurring-charges br { display: none; }
body #order-standard_cart.mj-viewcart .summary-container .float-left, body #order-standard_cart.mj-viewcart .summary-container .pull-left { float: none !important; }
body #order-standard_cart.mj-viewcart .summary-container .float-right, body #order-standard_cart.mj-viewcart .summary-container .pull-right { float: none !important; color: var(--mj-text); font-weight: 700; font-variant-numeric: tabular-nums; }
body #order-standard_cart.mj-viewcart .total-due-today { border-top: 1px solid var(--mj-line) !important; margin-top: 4px; }

/* ---- Kasse: mehr Abstand zwischen Schritt-Nummer und Kasten ---------------- */
body #order-standard_cart .mj-co-main .sub-heading, body #order-standard_cart .mj-co-main .sub-heading-borderless { margin: 34px 0 22px; }
body #order-standard_cart .mj-co-main .sub-heading:first-child { margin-top: 10px; }